Reputation: 393
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:
<div class="elementor-column-wrap elementor-element-populated">
<div class="elementor-widget-wrap">
<div data-id="da3c1dd" class="elementor-element elementor-element-da3c1dd elementor-widget elementor-widget-spacer" data-element_type="spacer.default">
<div class="elementor-widget-container">
<div class="elementor-spacer">
<div class="elementor-spacer-inner"></div>
</div>
</div>
</div>
<div data-id="5fa72fd" class="elementor-element elementor-element-5fa72fd elementor-widget elementor-widget-heading" id="regulation-menu-mobile" data-element_type="heading.default">
<div class="elementor-widget-container">
<h4 class="elementor-heading-title elementor-size-default"><a href="#regulation-mobile"><span class="menu-item-text"><span align="center">?מהי רגולציה</span></span></a></h4> </div>
</div>
<div data-id="4e7c2bc" class="elementor-element elementor-element-4e7c2bc elementor-widget elementor-widget-heading" id="about-menu-mobile" data-element_type="heading.default">
<div class="elementor-widget-container">
<h4 class="elementor-heading-title elementor-size-default"><a href="#maya-about-mobile"><span class="menu-item-text"><span align="center">?אודות</span></span></a></h4> </div>
</div>
<div data-id="45788e2" class="elementor-element elementor-element-45788e2 elementor-widget elementor-widget-heading" id="about-menu-mobile" data-element_type="heading.default">
<div class="elementor-widget-container">
<h4 class="elementor-heading-title elementor-size-default"><a href="#fit-mobile"><span class="menu-item-text"><span align="center">?למי זה מתאים</span></span></a></h4> </div>
</div>
<div data-id="2a24b44" class="elementor-element elementor-element-2a24b44 elementor-widget elementor-widget-heading" id="contact-menu-mobile" data-element_type="heading.default">
<div class="elementor-widget-container">
<h4 class="elementor-heading-title elementor-size-default"><a href="#solution-mobile"><span class="menu-item-text"><span align="center">פתרונות</span></span></a></h4> </div>
</div>
<div data-id="fcd1ddb" class="elementor-element elementor-element-fcd1ddb elementor-widget elementor-widget-heading" id="contact-menu-mobile" data-element_type="heading.default">
<div class="elementor-widget-container">
<h4 class="elementor-heading-title elementor-size-default"><a href="#contact-mobile"><span class="menu-item-text"><span align="center">צור קשר</span></span></a></h4> </div>
</div>
<section data-id="23d1d02" class="elementor-element elementor-element-23d1d02 elementor-section-boxed elementor-section-height-default elementor-section-height-default elementor-section elementor-inner-section" data-element_type="section">
<div class="elementor-container elementor-column-gap-default">
<div class="elementor-row">
<div data-id="b6d5052" class="elementor-element elementor-element-b6d5052 elementor-column elementor-col-100 elementor-inner-column" data-element_type="column">
<div class="elementor-column-wrap elementor-element-populated">
<div class="elementor-widget-wrap">
<div data-id="4f72658" class="elementor-element elementor-element-4f72658 mobilemenucontact elementor-widget elementor-widget-text-editor" id="mobilemenucontact" data-element_type="text-editor.default">
<div class="elementor-widget-container">
<div class="elementor-text-editor elementor-clearfix"><p style="text-align: center;"><img class="email-mobile" src="http://mayabarber.co.il/wp-content/uploads/2018/06/Untitled-1.svg" width="33" height="33"> <img class="facebook-mobile" src="http://mayabarber.co.il/wp-content/uploads/2018/06/Untitled-2.svg" width="33" height="33"> <label style="color: #61f6ff;" data-mce-fragment="1">| <span style="color: #001a71;" href="tel:052-6582643" data-mce-fragment="1"> 052-6582643</span></label></p></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
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!
Upvotes: 1
Views: 171
Reputation: 192
Can the issue be that your phone is not cleaning out its cache correctly? Can you try borrowing someones else's phone, who has never visited the site, and take a look at it with their phone?
If this solves your issue, you should figure out how to clean the cache from your phone to continue development.
Upvotes: 0
Reputation: 86
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:
<span class="spanMenu">
.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:
<p style="text-align: center;" class="makeSmall">
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. :)
Upvotes: 1