Site logo

Archived topic

Menu Help!

25 replies · Started by angelarose on September 23, 2020

Viewing posts 16–26 of 26

sorry about that, i just set the mobile menu breakpoint to 6000

Nice, you'll also want to remove the Menu label so only the hamburger icon is displayed.
https://share.getcloudapp.com/Wnur25yb

If you'll check the menu items, you'll see that they're sticking to each other.

That's my bad, I forgot to add the spacing so they don't stick too close.

Here's what you can do:

.main-navigation .main-nav ul > li > a {
width: max-content !important;
writing-mode: vertical-rl;
transform: rotate(-180deg);
padding-left: 0px;
padding-right: 0px;
padding-top: 15px;
padding-bottom: 15px;
}

We're basically just adding padding-top: 15px; and padding-bottom: 15px; for spacing on the previous CSS code we used.

Great, thank that fixed the spacing!

No problem. Let us know if you have further questions.

Feel free to open new topics if you have any other concerns.:)

Thank you! If I wanted to move that hamburger box to the right, left, or further down on the page, hwo would i go about doing that?

Thank you! If I wanted to move that hamburger box to the right, left,

You should be able to move your navigation’s alignment through Appearance > Customize > Layout > Primary Navigation.

On this option, you should be able to see a Navigation Alignment dropdown. Set it to left or right.

But. There's a recently discovered bug that may prevent you from seeing the Navigation Alignment dropdown.

Here's a temporary workaround for it while we fix things.
https://generatepress.com/forums/topic/primary-menu-center-alignment/#post-1457754

...or further down on the page, hwo would i go about doing that?

It depends. You can either do a custom CSS or place it on a different hook.

We can only determine what's the best way to go once we see actually know where its going to be placed.:)

Ah great thank you! so I was able to move it by adding margin-top and margin-right to button.menu-toggle . But when you click on the hamburger, all the other content on the webpage moves down. How do you get it so that doesn't happen? I'd like it so the page content doesn't shft up or down when the menu is clicked on. Thank you!:)

I’d like it so the page content doesn’t shft up or down when the menu is clicked on. Thank you!:)

You can definitely do that too with CSS. :)

#mobile-header {
    position: relative;
    overflow: visible;
}

#mobile-header > ul {
    position: absolute;
}

Let us know if it fits what you're trying to do.

Oh my bad. It's suppose to be this one.

.main-nav {
    position: relative;
    overflow: visible;
}

.main-nav > ul {
    position: absolute;
}

Great, thank you! it worked perfectly!

Nice one. glad to be of any help. :)

This archived topic is closed to new replies.