Before you ask please READ THIS

Change screen size when transitioning from desktop to mobile menu

in Rife Posts: 63
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

  • AirAir
    Posts: 10,970
    Hey :-)

    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.
  • Posts: 63
    Hi Air,

    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!
    what i want.jpg
    255 x 183 - 10K
    whats happening in larger screens.jpg
    181 x 232 - 10K
  • AirAir
    Posts: 10,970
    Hey :-)

    Thanks for the access.

    I have made a small adjustment. Please check it now.

    Great job with the customization!

    WIth kind regards.
  • Posts: 63
    Hi Air,

    This is exactly what I needed, thank you so much!

    Great support, as usual. :-)

    Best regards.
  • Posts: 63
    Hi Air,

    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!
  • AirAir
    Posts: 10,970
    Hey :-)

    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.
  • Posts: 63
    Thanks anyway, Air! It was a shot in the dark. :-D

    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.
  • AirAir
    Posts: 10,970
    So maybe we should work on paddings, margins and other spacing to achieve as much as possible?

    With kind regards.
  • Posts: 63
    Hi Air,

    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.
    Book now.jpg
    1960 x 170 - 35K
  • AirAir
    Posts: 10,970
    Hey :-)

    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.
  • Posts: 63
    Hi Air,

    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!
    Book now.jpg
    1943 x 303 - 35K
  • AirAir
    Posts: 10,970
    Could you paste me here what are your modifications for this button in Custom CSS? As there is a lot of code, and I am not sure what you refer as those changes.

    You can also tell me line numbers.

    Thanks :-)
  • Posts: 63
    Hi Air,

    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!
  • AirAir
    Posts: 10,970
    I believe that instead of all that code, you need only this:
    .top-menu .gt-bn-nav-button > a  {
    	display: inline-block;
    	padding: 0px 10px;
     	border: solid 1px;
    	border-radius: 10px;
    	background-color: #fbf038;
    	border-color: #7a7a7a;
    }
    I have added this. Check it out live.

    With kind regards.
  • Posts: 63
    Thank you, Air!

    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!
  • AirAir
    Posts: 10,970
    Great, so you have added some styling to it!

    Thanks for the coffee - the next one that I will drink will be from you in my mind :-D

    With kind regards.
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

In this Discussion