Hi Apollo team,
How should I edit/add a custom css so that my header transitions to the mobile menu (hamburger icon) from a larger screen screen size/px? I have a one-line logo-centered header variant, so my menu needs to transition to the hamburger icon earlier. I have long labels for my menu items and they go all over the place when I make the window size of my browser smaller.
Thank you in advance for your help!
Comments
It is rather difficult as it would require changes in many files CSS, JS and PHP.
I would rather try to work on some custom CSS that would reduce padding and font-size for smaller resolutions.
Could you share a live link to the page in question?
With kind regards.
Thank you for your response.
The page is not live yet, but I can give you temporary access. Could you please remind me again how to share the details privately?
I would prefer not to reduce the font size or the padding because the older generation is part of my target market. :-) Actually, I was able to partly achieve what I want; but my issue is having the hamburger icon and the basket icon not appearing inline on a larger screen because I changed the width of the tool icons column (and it's not yet switching over to mobile mode).
I attached the screenshots.
Cheers!
Thanks for the access.
I have made a small adjustment. Please check it now.
Great job with the customization!
WIth kind regards.
This is exactly what I needed, thank you so much!
Great support, as usual. :-)
Best regards.
While I was doing some final tests on my website today, I realized that the tweaks that we made on the hamburger icon look great, but the mobile menu doesn't actually dropdown until it reaches the screen size that was specified in the original code. Basically, my page doesn't have a menu during that transition.
I hoping that there's a quick and easy solution for this? I was going to launch the website tomorrow. Yikes!
TIA!
Well, this is what I have said in the first reply, that it is a wide code change.
I would still consider dropping font-size of the menu for problematic screen widths and making mobile menu work as it was designed.
There are probably many checks in JS that will prevent the menu from working reliably even if we will force it by CSS to show up.
With kind regards.
Maybe I will leave it as it is and they won't notice. I even had to increase the font sizes to make the text visible to those who use glasses.
Cheers.
With kind regards.
Thank you!
I actually restored the original code and just made some css tweaks. I arrived at a compromise that I can live with. :-)
The only issue that I can't resolve is how to style a menu item with its own css class so that it follows the center/middle alignment of the rest of the items, but reduce the width of the of the background color. I can't seem to get the right combination of display, vertical-align, text-align, and/or align-items values.
I have attached a screenshot. It's not a deal-breaker, but it does bother my sense of aesthetics a bit. :-D
Best regards.
Could you show me a link with the result of your work and show on the screen shot what you are aiming at?
I can see the "button", but I am not sure where it should be.
With kind regards.
Enclosed is a screenshot of how the mobile menu renders on a tablet. I would like the Book Now menu item to have the same look as the Book Now button on larger screens (using the blue box as reference), but the "button" appears elongated.
I tried to increase the right and left margins to 200px, which looked better, but the position of the button on desktop devices got affected. In one instance, the combination of display and alignment values that I tried yielded the right button size, but I could not get it to have center (and middle) alignment.
The modifications are in Custom CSS. I have previously sent the link to the WP dashboard via PM, the credentials remain the same.
Thank you in advance!
You can also tell me line numbers.
Thanks :-)
Sorry for being a pain. Here is the code related to the button:
@media only screen and (min-width: 1000px) {
.gt-bn-nav-button {
padding: 0px 10px;
margin-left: 35px;
margin-right: 35px;
border: solid 1px;
border-radius: 10px;
background-color: #fbf038;
border-color: #7a7a7a;
}
}
@media only screen and (max-width: 999px) {
.gt-bn-nav-button {
padding: 0px 20px;
margin-left: 80px;
margin-right: 80px;
border: solid 1px;
border-radius: 10px;
background-color: #fbf038;
border-color: #7a7a7a;
}
}
.gt-bn-nav-button span.title, .gt-bn-nav-button a {
text-align: center;
font-size: 20px !important;
color: #536b39 !important;
}
.gt-bn-nav-button span.title, .gt-bn-nav-button a:hover {
font-size: 20px !important;
color: #FFFFFF !important;
}
I gave up on adding the display and alignment values since I couldn't get them right.
This particular css class is added to the Book Now button on the main menu.
Thanks again!
With kind regards.
My final code is this:
.top-menu .gt-bn-nav-button > a {
display: inline-block;
padding: 0px 10px;
margin: 0px 30px;
border: solid 1px;
border-radius: 10px;
background-color: #fbf038;
border-color: #7a7a7a;
font-size: 20px !important;
color: #536b39 !important;
}
.top-menu .gt-bn-nav-button > a:hover {
font-size: 20px !important;
color: #FFFFFF !important;
}
Can I buy you a cup of coffee? :-D
Cheers!
Thanks for the coffee - the next one that I will drink will be from you in my mind :-D
With kind regards.