[Support request] Change Size of Drop down menu in Navigation Bar

[Dennis]

Hello,
my customer wants a Burger Menu for all Devices.
The problem I have now is, that the dropdown burger menu for the mobile version is full-size and takes over the whole screen,
which looks good for Mobile but not on my Desktop.
How can I change only the size of my dropdown menu for desktop and Tablet?
I would like it to be only as long as the longest word on my menu.
The second problem I have is, that I have 3 menu points that are on the Home page.
The thing is, that it marks all of them by clicking on the home button.
I want the menu point only to be marked when clicked on it or scrolled down to it.

[David]

Hi there,

have you thought of using the Off Canvas Panel ?

https://docs.generatepress.com/article/off-canvas-panel-overview/

Let me know – if not it will need some CSS.

[Dennis]

Hello David.

thanks for your reply.
I tried using the Off-Canvas Panel and it made it look a little bit better but still not as I want it to look. The menu opens on the right side now, as I wanted it, but the whole page is overlaid dark. I only want the menu to open on the right side and still be able to view the page normally.So when I drops down, it should only be as wide as the longest word in the menu. The other thing is, that I still could not figure out a solution for the on-click color to only be placed on a single menu point on the page. The first 3 Menu points are on the same page and I want the onclick color to show only the menu point I’m currently at.

[David]

Disable the Off Canvas panel then as it will be easier for me to provide some CSS for the default menu. Let me know when that change has been made

[Dennis]

Ok,
I disabled the Off-Canvas Panel.

[David]

Try this CSS:

@media(min-width: 769px) {
    #mobile-menu {
        position: absolute;
        right: 0;
        top: 100%;
    }
    #mobile-header .main-nav > ul > li a {
        padding: 0 10px;
    }
}

[Dennis]

Thank you. It made it a little better. The problem I have now is, that the menu text in the transparent bar should be white, but it’s black now. Is there a way to change that? The drop-down in white should stay as it is now. Another problem I noticed is, that when I click on Blog, the Menu totally disappears and only is visible when I scroll down.

[David]

So this CSS to force just the menu bar items to white:

.main-navigation .menu-toggle, .main-navigation .menu-bar-items {
    color: #fff !important;
}

And you’re using negative margins to pull the content up under ( in the blogs case over ) the header.
Hmmmm… that method is going to cause you a lot of headaches.

Its better to:

a) remove the negative margins.
b) use a Header Element to set Merge the Site Header with the content. See here:

https://docs.generatepress.com/article/transparent-header-and-navigation/

[Dennis]

Is there a way to not have all menu points marked? There are 3 Menu Points on the same page. When I click on home, all of them are “on click” colored. My customer only wants the menu point he has clicked on to be marked and to be able to scroll down to a point and when he reaches it, the menu point turns to the “on-click” color. Is this possible?

[David]

ON page links are a pain – as WP adds the current-menu-* class to all of them.
To get around this means using the Scroll to ID plugin:

https://en-gb.wordpress.org/plugins/page-scroll-to-id/

[Dennis]

I will try this plug in. Is there also a way to have the menu bar same width as the rest of the page? The page is limmited to 1024px but the Menu bar goes beyond that. I went to the customiser > layout> Primary Navigatoin and made changes for “width as content” but nothing changed.

[David]

Add this CSS:

@media (max-width: 2000px) {
    #mobile-header {
        max-width: 1024px;
        margin: auto;
    }
}

[Dennis]

Worked. Thank you.
Regarding the click on menu point, I think I have to figure out how to use this plugin
correctly because this is still not working.

[David]

That plugin adds its own classes to the menu items – see Toms reply here on how to style the menus:

https://generatepress.com/forums/topic/one-page-scroll-combined-with-regular-navigation/#post-689491

[Author]

Posts