- This topic has 11 replies, 3 voices, and was last updated 6 years, 6 months ago by
.
Hi – I have updated to the latest version of Jevelin (2.5.3) and am having an issue with my mobile logo being slightly stretched. I believe this occurred not with the most recent update, but within the past few releases. Also, the icons on the menu items are not formatting correctly and are stacked on top of the menu item names. Any suggestions on how to fix the two issues described above? I have attached pictures for your reference!
Also, here are the items of custom CSS code that I have added to the site, just in case any of these are interfering with the mobile site formatting:
.sh-header .sh-nav > li.menu-item:hover:not(.sh-nav-social) > a{
color: rgba(242,7,7,0.9) !important;
}#page-container .sh-header-5.sh-sticky-header-active .sh-nav .menu-item {
height: auto !important;
margin: 0 !important;
}#page-container .sh-header-5.sh-sticky-header-active .sh-nav .menu-item a {
line-height: 60px !important;
height: auto !important;
}.sh-sticky-header-active header.primary-mobile,
.sh-sticky-header-active header.primary-desktop {
height: 75px !important;
}.sh-sticky-header-active .header-logo {
padding: 3px 0;
}.sh-header-mobile-navigation .sh-nav-container,
.sh-header-mobile-navigation .header-logo {
padding: 1px 0;
}Solution for this topic
Hi @wkolari,
I hope you are well today and thank you for your questions.
You can resolve menu icon issue by adding the following CSS code in the Custom CSS code option of your theme on the below path.
Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code
.sh-nav-mobile li.menu-item-has-icon > a.menu-item-open-fix { padding-left: 22px; line-height: 1; }Site logo image is not displaying fine on your site on mobile device because you are using larger image height 260px than the recommended 250px as shown in the attached screenshots.
Best regards,
Shufflehound teamThe CSS you provided fixed the icon overlap in my header menu, however, the header logo is still being stretched. It is not stretch on my non-mobile site when viewed on a computer/PC. Is there any solution to remedy the image stretching? I believe the logo resolution is within the correct pixels dimensions required to fit properly.
Thanks for your help!
Regarding the logo please read me previous reply that is “Site logo image is not displaying fine on your site on mobile device because you are using larger image height 260px than the recommended 250px as shown in the attached screenshots.”
I can still see the logo image has height 260px.
I originally missed that part of your comment, my apologies! I have replaced the logo image with a 250px x 75px image as you suggested, but I am still having the same stretching issue (mobile site only). Can you take one last look at this?
*Also, the 250px max height is misleading, since my image is 75px in height. If the 250px is a width restriction, it should be denoted as max width 250px on the Theme Settings -> Header section.
Thanks!
Solution for this topic
On mobile device the screen size is smaller therefore the logo is displayed smaller but if you want to display it larger then you can achieve it by adding the following CSS code in the Custom CSS code option of your theme on the below path.
Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code
#page-container .sh-header-mobile-navigation .header-logo img { height: auto; max-width: 100%; width: auto; max-height: 100%; }Okay, so that fixed the logo resizing issue, but it caused an issue with the alignment of the menu drop down and shopping cart icons on the top header. Is there CSS to make the drop down and shopping cart dynamically display correctly in-line with the header logo (like they were before). Screenshot attached on how the header looks after using your CSS code.
*I set max-width: 90% from your above code
Solution for this topic
To resolve it try using below CSS code.
.sh-header-mobile .container { max-width: 90% !important; }Solution for this topic
Thanks for your help! With some tweaking to those 2 pieces of code, I was able to get everything aligned and sized correctly!
#page-container .sh-header-mobile-navigation .header-logo img {
height: auto;
max-width: 85%;
width: auto;
max-height: 100%;
}.sh-header-mobile .container {
max-width: 95% !important;
}You are most welcome here 🙂
I’d like to decrease the height / padding of the mobile header but haven’t been able to figure out with {padding 0 !important; margin; 0 !important} on any of the mobile nav or header elements. Anyone know how to accomplish this? Right now it seems to be taking up too much vertical room on screens where that’s important.
@tmattevc This topic is resolved so to help us keep support thread separates could you please create your own thread for your question instead of replying on others thread as it makes the thread messy and hard to read.
If you want to you can also add reference of this thread in your newly created thread.
We would be more than happy to help you on your new thread.
