[Resolved] Horizontal Sub Menu

[Mike]

Hello,

That worked! But is there any way I can do the same to the search icon? Preferably all in the same CSS that targets everything, meaning if I decide to add the woo commerce cart I dont need to add more CSS.

Thanks for the help so far! Much appreciated!

Thanks,
Mike

[Leo]

Let’s try using flexbox:
https://generatepress.com/forums/topic/horizontal-sub-menu/#post-599210

[Mike]

Hello,

Hmmm, its getting there. That now seems to be really crushed up.

Need more spacing between the search and menu tags… also I think the sub menu should be a little wider, it seems crushed together.

Thanks,
Mike

[Leo]

Are you sure you want everything centered?

You mentioned that you prefer the default layout which isn’t centered when you have other icons:
http://www.screencast.com/t/Ikdl3ue022

I think that would look better.

[Mike]

Hello,

Hmmm, now im confused. Before we started and not messed with any CSS, was my menu over to the left like that? I seem to remember it center, maybe I have seen it so much I am delusioning!

To the left actually seems alright, how would we impliment that?

I basically just want our inital changes to only have impacted the desktop and tablet versions of the site.

Thanks,
Mike

[Leo]

It’s centered if you don’t have navigation search (or WooCommerce cart) activated.

But when there are more than one element in the header, then they are split into left and right by default (because it looks better in our opinion)

Try this CSS to move the toggle to the left:

@media (max-width: 768px) {
    .menu-logo .main-navigation:not(.mobile-header-navigation) .menu-toggle {
        float: left;
    }
}

[Mike]

Hello,

Is there any way I can remove the primary menu nav logo on mobile? It seems that is interfering and pushing the menu slightly over to the right.

I have also added the following code to give the whole top bar some bottom padding,

	#site-navigation{
		padding-bottom: 15px;
	}

Thanks,
Mike

[Leo]

Try:

@media (max-width: 768px) {
    .site-logo.navigation-logo {
        display: none;
    }
}

[Mike]

Alright! Thats looking a LOT better than when we started! Thanks! Next question, how do I add padding to the top of the sub menu? It seems a little close to the buttons.

Thanks,
Mike

[Leo]

Can you open a new topics for separate questions?

I would like to mark this one as resolved 🙂

Thanks!

[Mike]

Sure! Will do it now.

Thanks for all your help with this!

Mike

[Leo]

No problem!

[zhu]

I want the sub-menu in the menu to be displayed horizontally.It is a pity that the shown as the picture (http://best-badge.com/wp-content/uploads/2020/02/best-bagdge.png) after I add the CSS .I want to make it only in one line, and then I only need this sub-menu to display horizontally, other sub-menus in the main menu do not need.

[David]

Hi there,

i see you have raised a new topic we will respond there.

[Author]

Posts