[Resolved] Menu Styling Changed?

[Dee Broughton]

Hi, Tom – Been a while!

I think maybe my css menu stying on the mobile view (squashed browser view, I mean) changed. I think I had a short red menu over to the left? But it’s back to a default, full width, transparent thing. Did something change that I can fix now?

Here’s a demo site: http://knowinghappy.com/

[Tom]

Hi Dee,

A while back we changed the mobile menu element from a regular link (<a>) into a button (<button>).

Maybe your custom CSS needs some tweaking to reflect that change?

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Dee Broughton]

Yes, that’s what I thought. Since I don’t use the sites with mobile, I don’t notice these things until a client points it out. Can you tell me what to change, please?

[Tom]

What CSS were you using before?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Dee Broughton]

I think this includes all of the menu stuff.

/* Enter Your Custom CSS Here */

/*media view for mobiles less than 768*/

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

  .menu-toggle {
    font-size: 14px !important;
    padding-left: 14px;
    padding-right: 6px;
    box-shadow: 1px 1px 4px #111;
    /*background: rgba(13,10,3,1);*/
    background: rgba(103,13,4,1);
    /*background: rgba(12,9,4,1);*/
    text-align: left !important; 
    position:fixed; 
    left:0; 
    top: 12% !important;
    border-top-right-radius:2px;
border-bottom-right-radius:2px;
    z-index: 99999;
  }
  
  .menu-toggle:hover {left:2px;box-shadow: 2px 2px 6px #111;}
  
   h3.menu-toggle:before {
	content: "\f0c9";
	font-family: FontAwesome;
	margin-right: 10px;
  }
  
 .toggled .menu-toggle:before {
	content: "\f0c9" !important;
}
  
  .main-nav {
 
    background: rgba(12,9,4,1);
    display: block!important; 
    position:fixed; 
    left:0; top: 12% !important; 
    padding-left: -11px !important;
    padding-right: 18px !important;
    padding-top: 35px !important;
    box-shadow: 1px 1px 3px #000;	
border-top-right-radius:20px;
border-bottom-right-radius:20px;
}
  
 .main-navigation a, .menu-toggle {
    font-size: 14px !important;
    padding-left: 12px !important;
  }
    

}
/*end small media--------------------------------begin large media*/

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

}

/*-----------end media*/

.main-navigation {letter-spacing: .09em;}

[Tom]

Anywhere you have .menu-toggle or a.menu-toggle, change to button.menu-toggle.

That should be it 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Dee Broughton]

Thanks, I changed that, but something is still missing. Sent you link email.

[Tom]

Try adding this:

button.menu-toggle {
    width: auto;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Dee Broughton]

Thanks.

[Author]

Posts