Desktop menu vs Mobile Menu styling

[mafgirl]

Dear lovely forum people,

I am designing a new website locally and am trying to achieve this:

I managed to do this using styling for these CSS selectors:

#nav-bottom-menu, #nav-top-menu {
    min-height: 38px;
    position: relative;
    top: -38px;
    z-index: 9999;
    text-shadow: 1px 0 1px #595959;
}
.menu_bar div {
    margin: 0 !important;
}
.menu_bar li {
    padding-right: 5px;
}
.menu_bar ul {
    margin: 0 !important;
}
.home #main {
    position: relative !important;
    top: -38px !important;
}

However, that means the menu doesn’t show up on mobile view (I always seem to do this.. obviously using the wrong CSS selectors to make these changes!) so I’ve just taken all the styling out of the custom CSS rules, which makes my site look like this:

But sadly, the mobile site STILL doesn’t show the menu… where could it have gone? I can’t figure out what;s gone wrong in Firebug/Web Inspector either…

It does seem to say display:none; in the styling of the element of nav bottom menu. I can’t find anywhere in mobile or menu/mobile where this is set to display none though.. could that be the culprit?

I don;t have this site live yet, but can make it live if it is easier for you guys to look at?
Basically my questions is: what CSS selectors should I use to style the desktop menu ONLY and leave mobile menu in the same place? or could i use the above CSS and then use .weaver-mobile in front of the same selectors to undo the changes for mobile?
What’s the best way to go about this?

Thanks for looking folks 🙂

PS forgot to say: I’m using Weaver Pro 🙂

[Weaver]

Try the opposite – use .weaver-desktop to prefix the desktop only rules. Can only guess without a site to look at.

[Author]

Posts