Change the menu in mobile theme

Home Forums Modern Change the menu in mobile theme

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #21435

    grupojomar
    Participant

    Change the menu in mobile theme

    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 →

    Hello, I would like that in a mobile theme the menu is up instead of down and fixed, thanks and congratulations for your work.

    #21442

    Oliver Juhas
    Keymaster

    Hi grupojomar,

    Please use custom CSS to reposition the menu to your liking:

    @media only screen and (max-width: 54.9375em) {
    	.menu-toggle {
    		bottom: auto;
    		top: -2px;
    	}
    
    	.has-navigation-mobile .site-footer {
    		padding-bottom: 0;
    	}
    
    	.has-navigation-mobile .site-header-navigation {
    		padding-bottom: 4rem;
    	}
    }

    Best regards,

    Oliver Juhas
    WebMan Design

    #21443

    grupojomar
    Participant

    Thank you, Oliver Juhas, I will donate because your work is meritorious, my most sincere congratulations.
    In addition to the menu, add the title of the site and logo? Thank you

    #21444

    Oliver Juhas
    Keymaster

    Hi grupojomar,

    Thank you for considering donation :)

    In addition to the menu, add the title of the site and logo?

    I’m not sure I understand your request here. Where would you like to add it? You mean you would like to stick them to top just like menu? Please note that I do not recommend this, you will simply shrink the space for website content on mobile devices. And as they already have small screens, this would not be desirable.

    Other than that, please try using your web browser code inspector to determine the CSS for your theme modifications.

    Best regards,

    Oliver Juhas
    WebMan Design

    #21445

    grupojomar
    Participant

    Thank you Oliver Juhas, what I mean is like the capture that I send you in attached.
    Regards

    #21447

    Oliver Juhas
    Keymaster

    Hi grupojomar,

    Please understand I designed the theme the most optimal way and your request basically changes the original intended design quite significantly. As such, I’m sorry, but the requested modification requires coding that is beyond the scope of the support service I provide.
    Please read terms of service and a knowledge base article about custom theme modifications for more info.

    Thank you for understanding.

    Best regards,

    Oliver Juhas
    WebMan Design

    #21448

    grupojomar
    Participant

    Anyway, thank you very much, and I will make the donation in the coming days.
    Regards

    #21453

    grupojomar
    Participant
    /* menu movil */
    @media only screen and (max-width:999px) {	 
    .site-header-navigation {
    	position: fixed;
    	width: 100%;
    }
    .menu-toggle {	
    	height: 7%;
    	}
    }

    Hello Good morning, this is what I was looking for, but when you open the menu with the phone on the side, the lower part is not displayed, could you correct yourself, do you have any suggestions? Thank you

    • This reply was modified 3 weeks, 4 days ago by  Oliver Juhas. Reason: Making the post public as there is no sensitive information shared
    #21455

    Oliver Juhas
    Keymaster

    Hi grupojomar,

    What do you mean by correcting myself please? This code is different from the solution I’ve provided – please see my reply above.

    I can see the mobile menu displayed perfectly fine on your website. Depending on the size of the mobile screen, please note that you might need to scroll the menu to display all items. But this is standard behavior.

    I can see you have added some image into the menu. Do you mean you want to display the image below the menu without such a big gap above? If so, please use this custom CSS, such as:

    @media only screen and (max-width: 54.9375em) {
    	.has-navigation-mobile .main-navigation-container .menu > ul {
    		padding-top: 1.62rem;
    		padding-bottom: 1.62rem;
    	}
    
    	.has-navigation-mobile .main-navigation-container .menu {
    		height: auto;
    	}
    }

    Please try using your web browser code inspector to determine the CSS for your theme modifications.

    Best regards,

    Oliver Juhas
    WebMan Design

    #21456

    grupojomar
    Participant

    Thanks again.
    For your time, work and dedication.

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.