Menu styling

Shapely
1

Hello,

I am trying to re-style my header on Posts - Thrive Learn. Having found a few solutions in the forum, I have used a combination of CSS and changes to header.php to get rid of the header search box.

I am almost there but when the browser is less than 991px i still have a div called “module widget-handle mobile-toggle right visible-sm visible-xs” that I can’t seem to get rid of with CSS.

I have tried lots of rules including:

@media (max-width: 991px)
.module.widget-handle {
display: none;
}

But I can’t get it to work. This is causing my menu to display one row below the logo and I want a completely clean header with just the logo and the menu displaying on the same row.

Can you help me to do this? Or is there another way of achieving the same end?

Many thanks for all of your excellent help so far.

S

2

Hi @seanm,

The best you could do is something like attached screenshot using this css code:

@media only screen and (max-width: 600px)
#mega-menu-wrap-primary .mega-menu-toggle + #mega-menu-primary {
        display: inline-flex;
}

Thanks,

Cristian