[Resolved] seconday menu float right not working

[Cris]

Hello,

I have searched for information here in support but I did not find a solution. I explain what happens to me:
I have the “primary menu” floating to the right and now I have put a “secondary menu” that I want to be on the right of the “primary menu”. I put “float right” to both but the secondary is below the primary.
How do I fix please?

[Leo]

Hi there,

I believe this method would work better for the social icons:
https://docs.generatepress.com/article/generate_menu_bar_items/

Let me know if this helps 🙂

[Cris]

Hi Leo,

That’s great but on mobile this disappears. I wish they would appear inside the burger.

[Ying]

Try adding this CSS:

@media (max-width: 1328px) {
.has-inline-mobile-toggle #site-navigation .inside-navigation > .menu-bar-items, .has-inline-mobile-toggle #site-navigation .inside-navigation > .menu-bar-items >* {
    display: flex !important;
}

.has-inline-mobile-toggle .header-widget, .has-inline-mobile-toggle #site-navigation {
    flex-basis: fit-content;
    margin-left: 0;
}
}

[Cris]

Thanks, Ying!

Now it does appear but it is out of the hamburger menu. I would like it to appear inside the hamburger menu.

[Ying]

I would like it to appear inside the hamburger menu.

Change the CSS:

.has-inline-mobile-toggle #site-navigation .inside-navigation > .menu-bar-items, .has-inline-mobile-toggle #site-navigation .inside-navigation > .menu-bar-items >* {
    display: flex !important;
}

to:

.mobile-menu-open .has-inline-mobile-toggle #site-navigation .inside-navigation > .menu-bar-items, .mobile-menu-open .has-inline-mobile-toggle #site-navigation .inside-navigation > .menu-bar-items >* {
    display: flex !important;
}

[Cris]

Cool!
I only had to remove a part because it expanded the hamburger menu to the right of the logo

Thank you very much!

Finally it was like this
`@media (max-width: 1328px) {
.has-inline-mobile-toggle #site-navigation .inside-navigation > .menu-bar-items, .has-inline-mobile-toggle #site-navigation .inside-navigation > .menu-bar-items >* {
display: flex !important;
}

.has-inline-mobile-toggle .header-widget, .has-inline-mobile-toggle #site-navigation {
flex-basis: fit-content;
margin-left: 0;
}
}

[Ying]

You are welcome 🙂

[Author]

Posts