How to decrease the navigation bar's height? through CSS

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.

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.

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.

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?

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.

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

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.

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.

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

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?

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/

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

You're welcome!