Menu Header on mobile

Home Forums Mustang Menu Header on mobile

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #22750
    MohamedHesham
    Participant

    Menu Header on mobile

    Resolved

    Hey there! Have you noticed this support service is provided FREE of charge?
    If you like the speed and accuracy of resolutions, please consider supporting me with a small donation. Thank you

    Consider a donation →

    The menu header is offset when when viewed on an iphone screen.
    I tried changing several CCS codes to get it to work but no hope. Any help will be much appreciated. P.S. I’m not tech savvy, and I’m probably using a wrong code, so sorry in advance.

    @media only screen and (max-width: 740px) {
      .responsive-design .logo img,
    .responsive-design .header-wrapper.is-sticky .logo img {
    • This topic was modified 5 months, 4 weeks ago by Oliver Juhas. Reason: Formatting code
    #22754
    Oliver Juhas
    Keymaster

    Hi MohamedHesham,

    Have you already applied some code trying to fix the issue? Could you please revert your code so I can see the issue and provide specific help? Thank you.

    Best regards,

    Oliver Juhas
    WebMan Design

    #22755
    MohamedHesham
    Participant

    I understand that this is probably the worst CSS coding you saw, I just put some codes which I saw here in the forum before for similar issues! some of them worked and some unfortunately caused this issue with the website header.

    .logo img {
    	width: 300px;
    	height: 75px;
    	margin-top: 0px;
      margin-bottom: 20px;
      margin-right: 0px;
      margin-left: 0px;
    }
     
     .header-wrapper.is-sticky .logo img {
    	width: auto;
    	max-width: 100%;
    	max-height: 60px;
    	margin: 20px 0;
    	vertical-align: top;
    }
    
    @media only screen and (max-width: 740px) {
      .responsive-design .logo img,
    .responsive-design .header-wrapper.is-sticky .logo img {
    	max-width: 200%;
    	width: 250px;
    	height:70px;
    	max-height: 50px;
    	  margin-top: 15px;
      margin-bottom: 0px;
      margin-right: 0px;
      margin-left: 150px;
      padding-bottom: 0px;
      padding-left: 0px;
    	}
    	}
    
    @media only screen and (max-width: 480px) {
      .responsive-design .logo img,
    .responsive-design .header-wrapper.is-sticky .logo img {
    	max-width: 200%;
    	width: 250px;
    	height:75px;
    	max-height: 50px;
    	  margin-top: 15px;
      margin-bottom: 0px;
      margin-right: 0px;
      margin-left: 0px;
      padding-bottom: 0px;
      padding-left: 0px;
    	}
    	}
    @media only screen and (max-width: 360px) {
      .responsive-design .logo img,
    .responsive-design .header-wrapper.is-sticky .logo img {
    	max-width: 400%;
    	width: 400px;
    	max-height: 40px;
    	  margin-top: 10px;
      margin-bottom: 0px;
      margin-right: 0px;
      margin-left: -110px;
      padding-bottom: 0px;
      padding-left: 0px;
    	}
    	}
    
    .pane.twelve {
      margin: -10px;
      padding: 2px;
    }
    
    #nav-main.nav-main.clearfix {
      margin: 30px;
      padding: 0px;
    }
    
    .menu-search-switch.no-scroll-link {
      margin: 30px;
    }
    • This reply was modified 5 months, 4 weeks ago by Oliver Juhas. Reason: Formatting the code. Making the post public as there is no sensitive information shared
    #22756
    MohamedHesham
    Participant

    Hello Oliver again,

    just to explain why so many codes, I needed to resize the logo and that was the only way it would work unfortunatly for both desktop and mobile versions.]if your have a more straight forward code that could make it work, that would be great.

    Best regards

    Mohamed

    • This reply was modified 5 months, 4 weeks ago by Oliver Juhas. Reason: Making the post public as there is no sensitive information shared
    #22768
    Oliver Juhas
    Keymaster

    Hi Mohamed,

    If you only need to resize the logo, you can do so using this code:

    .logo img {
    	width: 300px;
    }
    
    @media only screen and (max-width: 1024px) {
    	.responsive-design .logo,
    	.responsive-design h1.logo,
    	.responsive-design .header-wrapper.is-sticky .logo,
    	.responsive-design .header-wrapper.is-sticky h1.logo {
    		max-width: none;
    	}
    
    	.responsive-design .logo img,
    	.responsive-design .header-wrapper.is-sticky .logo img {
    		max-height: 45px;
    	}
    }

    Other code is irrelevant and it seems the margin: -10px is causing your issue.

    Best regards,

    Oliver Juhas
    WebMan Design

    #22774
    MohamedHesham
    Participant

    Hello Oliver,

    Thanks for your help and support, Really appreciate it.

    I used the code you provided and seems it fixed the logo resize issue, however the logo disappeared from the sticky menu and from the mobile menu on all screen sizes. Also the menu is not sticky on the mobile version.

    Best regards,

    Mohamed

    #22775
    MohamedHesham
    Participant

    This is the picture attachment again since it wasn’t sent on the previous reply.

    • This reply was modified 5 months, 3 weeks ago by Oliver Juhas. Reason: Making the post public as there is no sensitive information shared
    Attachments:
    You must be logged in to view attached files.
    #22783
    Oliver Juhas
    Keymaster

    Hi Mohamed,

    I experience no issue previewing your website. I can see the logo on sticky header too:

    If you still experience the issue, try to use this custom CSS:

    .header-wrapper.is-sticky .logo img {
    	width: 300px;
    	max-height: none;
    }

    As for the logo not being displayed on mobile, it seems browsers have some difficulty with SVG image sizing. Try to change the max-height: 45px; in the code I’ve provided for:

    width: 150px;
    max-height: none;

    As for mobile header not being sticky, this is by design in the theme. You should be able to enable the sticky header using this custom CSS:

    .header-wrapper.is-sticky {
    	position: fixed !important;
    }

    Best regards,

    Oliver Juhas
    WebMan Design

    #22787
    MohamedHesham
    Participant

    Thanks So much Oliver! You are simply the best. Great response and great follow up.

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.