[Resolved] Mobile Header Issue

[Tom]

It seems mobile menus are a hot item in these forums. I searched and tried some solutions but they didn’t seem to apply to me.

There are two issues here:

1. I cannot get the collapsed main navigation to float to the right of the site title. I’ve tried half dozen CSS tweaks and nothing seems to work. I’d like it to vertically align middle with the title.

2. The menu slides out from the left. That works, but there are no menu links there. I thought maybe they were just white for some reason so I added this CSS to my child theme.

.main-navigation.slideout-navigation .main-nav ul li a {
    color: #000000;
}

Still no links showing up. Clicking/pushing where the links should be does not change the page, so I am thinking they’re actually not there (or offscreen somehow). Note – when the menu is NOT set to slide out, the links appear in black and work just fine.

Hopefully with the float sorted out it will get rid of all that white space in the header.

Not sure if this makes any difference, but the top is not a topbar widget area, it’s an uncollapsed secondary menu.

Thanks!

[David]

Hi Tom,

try this CSS for your header alignment:

@media (max-width: 768px) {
    .inside-header {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: distribute;
        justify-content: space-around;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
    }
    .site-branding {
        margin-botom: 0;
    }
}

The Slide out Navigation is like the primary and secondary. You have to assign a menu to it.

[Tom]

Thanks for the reply. The CSS worked to float it correctly. I applied a smaller padding value to .inside-header which cleared up the white space. There is one thing though – this line generates an error in the editor saying it expects “start, end, center, justify but found distribute”, is it anything to worry about?

-ms-flex-pack: distribute;

And the menu, I had no idea it was an actual menu. I thought the theme just invoked some magic on the existing menu. This is actually better. Works great.

[David]

Hi Tom,

the error shouldn’t be a problem, its legacy code for old MS browsers. probably missing from the Customiser code parser. You can remove it if you want.

[Tom]

Awesome, thanks for your help!

[David]

You’re welcome

[Author]

Posts