Archived topic
Menu Styling Changed?
8 replies · Started by Dee Broughton on November 13, 2015
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/
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 :)
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?
What CSS were you using before?
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;}
Anywhere you have .menu-toggle or a.menu-toggle, change to button.menu-toggle.
That should be it :)
Thanks, I changed that, but something is still missing. Sent you link email.
Try adding this:
button.menu-toggle {
width: auto;
}Thanks.