Hamburger menu styling doesn't appear the same on phone

Question

I have created a mobile hamburger menu with several items in it. The thing is, when I try to edit the CSS and make changes they appear fine in my inspect preview, but when I actually check the website on the mobile I don't exactly see the styling I was trying to achieve. Here are the things that I tried to do:

I want to change the distance between the borders that are visible on ::focus (make them a bit more far from the text). When I insepct, it looks different than when I check it out on my phone. I tried adding margin: 30px 0; padding-top: 25px; to the span class on focus, but it doesn't work on phone.

I have tried changing the margins, paddings and using whitespace:nowrap. It looked fine when I previewed the changes on my desktop, but when I checked out my phone my styling looked different.

Here's the HTML of the menu:


                    
                
                
                    
            
        
                
                
                
                
            ?מהי רגולציה
       
                
                
                
            ?אודות
     
                
                
                
            ?למי זה מתאים
     
                
                
                
            פתרונות
      
                
                
                
            צור קשר
       
                
                
                        
                
                
            
                    
                
                
                      |  052-6582643

Here's the CSS:

.menu-item-text-mobile {
    -webkit-transition: border 200ms ease-out; 
-moz-transition: border 200ms ease-out; 
-o-transition: border 200ms ease-out; 
transition: border 200ms ease-out; 
border-bottom: 2.11px solid transparent; 
border-top: 2.11px solid transparent; 
margin-left:50px;
  display: inline-block;
    margin: 20px 0;
        padding-top: 25px;

}

.menu-item-text-mobile::after 
    bottom: 1px;                  
}

#who-menu-mobile:hover .menu-item-text, 
#who-menu-mobile:focus .menu-item-text, 
#who-menu-mobile:active .menu-item-text{ 
border-bottom: 2.11px solid #61f6ff; 
margin-top: 5px;
margin-bottom: 5px;
border-top: 2.11px solid #61f6ff; 
bottom: -3px;
}
#solutions-menu-mobile:hover .menu-item-text, 
#solutions-menu-mobile:focus .menu-item-text, 
#solutions-menu-mobile:active .menu-item-text{ 
border-bottom: 2.11px solid #61f6ff; 
border-top: 2.11px solid #61f6ff; 
  display: inline-block;
    margin: 20px 0
}

#regulation-menu-mobile:hover .menu-item-text, 
#regulation-menu-mobile:focus .menu-item-text, 
#regulation-menu-mobile:active .menu-item-text{ 
border-bottom: 2.11px solid #61f6ff; 
border-top: 2.11px solid #61f6ff; }

 @media(min-width: 300px) and (max-width: 749px){ .elementor-widget-heading .elementor-heading-title > a{ justify-content: center !important; display: flex !important;
 }}

Here's the website if you wanna inspect it: mayabarber.co.il

And here's a screenshot of how I want it to look:

Thanks!

Gilbert Rogers · Accepted Answer

1 and 2:

For adjusting the distance between the options target span and reduce the margin on it to make them closer between each other. You can add the class to your spans like this, then use padding to make the lines farther from text. Play with the values.

Would look something like:



.spanMenu {
    padding: 5px;
    margin-bottom: -20px;
}

3.

To keep the phone number from going onto two different lines use an @media

Currently inspecting and fiddling to get the correct CSS so bear with me.

To resize you can add a class="makeSmall" to the p tag like this:

Then add this @media to your CSS

@media only screen and (max-width: 600px) {
    .makeSmall {
        font-size:12px;
    }
}

This will allow you to adjust just the text size in the p tag. This is a quick and dirty way of doing it; I don't have the time to do the hierarchy of your CSS to just target them with CSS. I hope this helps though. :)

Hamburger menu styling doesn't appear the same on phone

Answers (2)

Related Questions

Hamburger menu styling doesn&#39;t appear the same on phone

Answers (2)

Related Questions

Hamburger menu styling doesn't appear the same on phone