[Webgo82]

Hi,

I think I asked this before but didn’t get an answer.

I want to reduce the height of the horizontal bar with the menu so that on desktop and mobile view there remains more space to the page content. I want it to be only as high as the logo requires, how can I do this? The website is ashantidance.com.

[Skandha]

@webgo82: Hello there,
Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

.navigation-classic #header-wrapper:not(.header-top) .site-navigation a {
    padding: 0 25px;
}
.navigation-classic #header-wrapper:not(.header-top) .social-navigation a, .navigation-classic #header-wrapper:not(.header-top) #search-toggle-right {
    padding: 0 10px;
}
.site-branding {
    padding: 0 25px;
}
.custom-logo {
    margin: 0 auto;
}

Let me know if this works out!
Kind Regards,
Skandha

[Webgo82]

Great, it worked. One more question. I saw that on some websites the upper menu bar behaves like this:

1. On desktop: Once you start scrolling down the height of the menu bar gets reduced and also the logo becomes smaller. Once you scroll up again to the top of the page the menu bar and the logo increase again in size.

2. On smartphones: On top, the menu bar is shown, once you start to scroll down it becomes the mobile menu with with the tree horizontal lines and thereby gives also more space to the content.

Would it be possible to implement this somehow?

[Skandha]

@webgo82: Hello there,
Can you please remove the under construction mode so that I can look into the issues?

Kind Regards,
Skandha

[Webgo82]

I’ve deactivated it.

[Skandha]

@webgo82: Hello there,
Please replace the CSS Code I provided you with the following.

@media screen and (min-width: 1024px) {
    .navigation-classic #header-wrapper:not(.header-top) .site-navigation a {
        padding: 0 25px;
    }
    .navigation-classic #header-wrapper:not(.header-top) .social-navigation a, .navigation-classic #header-wrapper:not(.header-top) #search-toggle-right {
        padding: 0 10px;
    }
    .site-branding {
        padding: 0 25px;
    }
    .custom-logo {
        margin: 0 auto;
    }    
}

Let me know if this works out!
Kind Regards,
Skandha

[Webgo82]

Unfortunately, the code you’ve provided does not yield the desired result.

On desktop the, menu bar increases now in size when scrolling down.

On mobiles, the menu bar does not become the hamburger menu when scrolling down. It is also bigger than before.

The behaviour I want to achieve with the menu bar is the one shown in this website (not sure if it is wordpress): https://www.fitmedi-akademie.de/

[Skandha]

@webgo82: Hello there,
Please replace the CSS Code I provided you with the following.

@media screen and (min-width: 1024px) {
    .navigation-classic #header-wrapper:not(.header-top) .main-nav-scrolled .site-navigation a {
        padding: 0 25px;
    }
    .navigation-classic #header-wrapper:not(.header-top) .main-nav-scrolled .social-navigation a, .navigation-classic #header-wrapper:not(.header-top) #search-toggle-right {
        padding: 0 10px;
    }  
}
.main-nav-scrolled .site-branding {
    padding: 0 25px;
}
.main-nav-scrolled .custom-logo {
    margin: 0 auto;
}  

Let me know if this works out!
Kind Regards,
Skandha

[Webgo82]

Hi,

thank you, but the menu bar does still not have the desired behaviour.

My desired outcome is:

Option A: once the user starts to scroll down, the logo gets reduced in size (maybe 30%) and hence also the whole menu bar reduces in height. If this behaviour is possible on desktop and mobile devices it would be great.

Option B: If option A is not possible, I would prefer the following only for mobile view:
– In the initial view, when opening the page, the menu bar should be only as heigh as the required by the logo (currently, there is still a lot of black space on too and below the logo)
– When scrolling down the logo in the menu bar disappears, only the hamburger menu remains and hence the menu bar gets reduced in height.
(- the desktop view could remain as it is now)

Many thanks in advance. I appreciate your support!

[Author]

Posts