Docs

[afleischer]

I’ve got 2 questions for a site i’m working on:

1. The mobile menu icon (3-bars + menu text) is following the site link colors I set in the customizer. Unfortunately, my site links are dark gray with a lighter gray on hover, and since the page background is dark as well, the mobile menu becomes almost invisible. I’ve used other form threads for css customizations to change the mobile menu icon to white, but none of them are working to change the color. The following code didn’t affect it:

.x-btn-navbar.collapsed {
    color: #ffffff!important;
}
.x-btn-navbar.collapsed:hover {
    color: #ffffff!important;
}
.x-btn-navbar {
    color: #ffffff!important;
}
.x-btn-navbar:hover {
    color: #ffffff!important;
}

2. The home page is full-width with a slider below the masthead, but most other pages are using the “blank, container, header and footer” template, so the content of those pages is in a white box. What would be the css to push that body content area down? Right now, the sub-menu overlaps the body content on these pages and doesn’t look good:

[afleischer]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for writing in! The code above will only work fro default menu. Since your are using Ubermenu, the code has no effect. Please use this code instead:

.x-btn-navbar,
.ubermenu-responsive-toggle-main {
    color: #ffffff!important;
}

.x-btn-navbar:hover,
.ubermenu-responsive-toggle-main:hover {
    color: #ffffff!important;
}

Please let us know if this works out for you.

[afleischer]

Ah! I hadn’t considered that the mobile responsive menu would also be through Ubermenu. That code did the trick for the mobile menu, thank you!

Any idea on the second question up there from the first post?

[Rue Nel]

Hello There,

Thanks for updating in!

Do you want something like this?

If that is the case, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.page-template-template-blank-1 .site > .x-container.max.width.offset {
    margin-top: 80px;
}

Please let us know if this works out for you.

[afleischer]

Hi Rue Nel! That didn’t fix the issue unfortunately – maybe I was wrong about the page template being used for that first css selector?

[Friech]

Hi There,

I did check your secondary pages and that is the correct template class. Try adding the CSS code on top of your Custom CSS on Customizer. If it works, check your entire custom CSS here: http://csslint.net/ and resolve all the syntax errors.

Hope it helps, Cheers!

[afleischer]

Putting the above CSS at the top worked Freich, thank you, and thanks for the csslint link, that’ll come in handy! The only error I got was “Expected RBRACE at line 110, col 4.” That’s the last brace of my CSS, closing the previous left brace, so not sure why that’s an error. The remaining issues were all IE6 warnings about adjoining classes and !important usage, which just makes me wish IE6 would go the way of the dodo.

[afleischer]

Ah! I figured it out, was missing a right brace from a @media declaration above. Anyway, thanks again for the help!

[Friech]

You’re more than welcome, glad we could help.

Cheers!

[Author]

Posts