[Resolved] How to decrease the navigation bar’s height? through CSS

[David]

Hi there,

what you’re trying to achieve using the GP navs with sub menus is just not feasible.
you would need to get a custom developer to build that for you as it would require work that is out of our scope.
Sorry for any inconvenience.

[Ravi Dixit]

You guys have provided the support for a similar query here https://generatepress.com/forums/topic/adding-horizontal-scrolling/#post-1536346

The code provided to me here This code worked for me and I just want a little more customization in there.

I need to remove the slider lines showing at the bottom of the menu item and Secondary Navigation is showing there additionally. It is very important for me and being from a non-coding background, I can not do this without your help.

[Leo]

Hi there,

Unfortunately, providing a full custom solution is out of the scope of this forum as David and Fernando already mentioned.

Please refer to the article here:
https://generatepress.com/what-support-includes/

If it’s very important for your project and you are unable to make it work with the guidance we’ve already provided then I would suggest contacting a developer using a service like Codeable suggested in the linked article above.

Thanks for your understanding.

[Ravi Dixit]

Okay, I understand this, thanks for sharing!

But I have done almost everything and the menus are ready to be used perfectly, just one thing I don’t understand. Why the sub-menus are not showing when clicking on the menu items? Can you please help me with this only?

[Fernando]

You’ll need custom code to make sub-menus appear with your scrollable setup. As mentioned, the level of customization required for this would be out of our scope of support.

[Ravi Dixit]

Okay, then I am leaving that for now, will look into it in future. Now I am back with the default navigation of GeneratePress. Can you help me to decrease the height of the navigation bar for both desktop and mobile views?

Also, how can I shift the off-canvas hamburger from right to left in the mobile view?

Thanks in advance

[David]

OK.
So Customizer > Layout > Header, reduce your top and bottom padding.

For mobile use this CSS to remove the Header Widget completely as although its empty it still occupies some space:

@media (max-width: 768px) {
    .header-widget {
        display: none;
    }
}

You can also reduce the Menu Item height in Customizer > Layout > Primary ( Secondary ) Navigation, but be mindful that a the minimum recommended tap target size is 48px.

Off Canvas Panel you can change sides in Customizer > Layout > Off Canvas.

[Ravi Dixit]

Off-Canvas Panel you can change sides in Customizer > Layout > Off Canvas.

It is changing the side of off-canvas menus that will appear, I want to change the menu hamburger icon from right to left. Check the link I shared in a private field.

[David]

Try this CSS:

@media(max-width: 768px) {
    #mobile-menu-control-wrapper {
        flex-direction: row-reverse;
        flex: 1;
        justify-content: space-between;
    }

    .main-navigation .menu-toggle {
        flex-grow: 0;
    }

    .site-logo {
        position: absolute;
        top: 10px;
        left: 80px;
        z-index: 1000;
    }
}

[Ravi Dixit]

Great, that worked like a charm!

One last think then I will mark this resolved. How can I increase the search icon and off-canvas menu icon size and make it more bold?

[David]

You can make the font larger without affecting the other text:

nav .gp-icon {
    font-size: 24px;
    line-height: 1em;
    position: relative;
    bottom: -4px
}

ANd in the previous CSS you will need to adjust the left: 80px; to move the logo over.

If you want to make the icons thicker then you would need to replace the icons with your own SVGs:

https://docs.generatepress.com/article/generate_svg_icon_element/

[Ravi Dixit]

Thanks for your time and efforts in solving my query. Thanks a lot…

[David]

You’re welcome!

[Author]

Posts