Tagged: ,

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • September 20, 2021 at 5:45 am #290686
    Webgo82
    Participant

    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.

    September 20, 2021 at 6:16 am #290690
    Skandha
    Participant

    @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

    September 20, 2021 at 4:22 pm #290730
    Webgo82
    Participant

    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?

    September 21, 2021 at 5:57 am #290833
    Skandha
    Participant

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

    Kind Regards,
    Skandha

    September 21, 2021 at 5:59 am #290835
    Webgo82
    Participant

    I’ve deactivated it.

    September 21, 2021 at 6:13 am #290844
    Skandha
    Participant


    @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

    September 22, 2021 at 12:59 am #290850
    Webgo82
    Participant

    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/

    September 22, 2021 at 2:05 am #290909
    Skandha
    Participant

    @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

    September 22, 2021 at 5:40 am #290921
    Webgo82
    Participant

    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
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Reduce height of menu bar’ is closed to new replies.