- This topic has 8 replies, 2 voices, and was last updated 3 years ago by Webgo82.
-
AuthorPosts
-
September 20, 2021 at 5:45 am #290686Webgo82Participant
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 #290690SkandhaParticipant@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,
SkandhaSeptember 20, 2021 at 4:22 pm #290730Webgo82ParticipantGreat, 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 #290833SkandhaParticipant@webgo82: Hello there,
Can you please remove the under construction mode so that I can look into the issues?Kind Regards,
SkandhaSeptember 21, 2021 at 5:59 am #290835Webgo82ParticipantI’ve deactivated it.
September 21, 2021 at 6:13 am #290844SkandhaParticipant
@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,
SkandhaSeptember 22, 2021 at 12:59 am #290850Webgo82ParticipantUnfortunately, 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 #290909SkandhaParticipant@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,
SkandhaSeptember 22, 2021 at 5:40 am #290921Webgo82ParticipantHi,
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!
-
AuthorPosts
- The topic ‘Reduce height of menu bar’ is closed to new replies.