WordPress menu hides when i add custom shortcode

site after the shortcode is added

I built a plugin that generates a fullpage tab after a shortcode is called but for some reason immediately the shortcode is called the main menu hides on the page.

My custom css is shown below

              <style type="text/css">
   .fpt-btn{

font-size: 1.5em;
  }



@media screen and (max-device-width: 500px) {

 .fpt-btn{

font-size: 1.0em !important;
   }
 }


.ftp-spinner{
  display:none !important; 
   /*z-index: -1;*/
 }
   .fpt-small{font-size: 1.2em;
          font-style: italic;}

  .fpt-numbers{
font-weight:bold;
  }


    .bs-example{
    margin-top: 20px;
    margin-bottom: 20px;
}
.hide23{
    border-style:none !important;
}

.tab-pane{margin:20px;}


.selected{
    border-bottom: 2px solid #FF7F50;
}

@media screen and (min-device-width: 800px) {

  .tab-content{width:50% !important;}
  .fpt-small{font-size: 0.8vw;
              font-style: italic;}
}


@media screen and (max-device-width: 799px) {

  .tab-content{width:100% !important;}
}


   @media screen and (max-device-width: 800px) {

  #fpt-spinner-caption{font-size:1.7em !important;}
}




@media screen and (max-device-width: 800px) {
/*  li {width:50%;}*/

  .fpt-ul{display:none !important;}
}


  @media screen and (max-width: 800px) {

  .fpt-label{
  font-size: 2.5vw !important;
}

}

  @media screen and (max-width: 500px) {

  .fpt-label{
  font-size: 3.3vw !important;
}

}

.spinner-border{
color: #FF7F50 !important;
}



.fpt-h3{
    font-size: 1.5vw;
    color:black;
}
.fpt-label{
  font-size: 1.2vw;
}


.fpt-a{
    background-color: #fff !important;
}
.fpt-ul:hover{
    color:transparent!important;
}



.fpt-ul{
    border-style:none !important;
     /*border-bottom: 2px solid #FF7F50  !important;*/
}



{
    display: inline !important;
    color:black;
}
.span-active{border:2px solid #FF7F50;
    border-radius:100%;
    font-size: 15px;
    padding-right: 5px; 
    padding-left: 5px;
    margin-right:5px;  
    margin-left:5px;
    margin-top: -5px; 
    color: white;
    background-color: #FF7F50; }



    .span-inactive{border:2px solid grey;
      border-radius:100%;
      font-size: 15px;
      padding-right: 5px; 
      padding-left: 5px;
      margin-right:5px;  
      margin-left:5px;
      margin-top: -5px; 
      color: grey !important;
      background-color: white; } 

    .inactive{color:grey !important;}  

    .progress-bar{ background-color: #FF7F50;}

There’s no visibile conflict between my custom css and elementors code.My current theme is ocean wp and i’m using elementor page builder..Let me know if i need to add any other details to make debugging easier.

Read more here:: WordPress menu hides when i add custom shortcode

Leave a Reply

Your email address will not be published. Required fields are marked *