Archived topic

seconday menu float right not working

7 replies · Started by Cris on November 18, 2022

Viewing posts 1–8 of 8

November 18, 2022 at 8:23 am #2421782

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?

November 18, 2022 at 11:37 am #2422029

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 :)

November 18, 2022 at 1:31 pm #2422166

Hi Leo,

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

November 18, 2022 at 3:08 pm #2422237

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;
}
}

November 19, 2022 at 6:12 am #2422814

Thanks, Ying!

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

November 19, 2022 at 1:09 pm #2423334

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;
}

November 19, 2022 at 4:07 pm #2423457

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;
}
}

November 20, 2022 at 12:29 pm #2424453

You are welcome :)

This archived topic is closed to new replies.

Start building better websites today.