Navigation

Tagged: 

  • Author
    Posts
  • #1325908

    scottdefusco
    Participant

    I’m trying to get the standard menu to hide on mobile devices. I don’t wnt the menu to display at all on mobile devices. I searched the forum and found guidance to add this customer CSS, which I have,

    @media (max-width: 979px) {
    .masthead-inline .x-btn-navbar {
    display: none !important;
    }
    }

    however the main menu still displays on mobile. The page is http://www.capturelife.com/capturelife-home-page-backup/

    Thanks for your help.

    #1326054

    Darshana
    Moderator

    Hi there,

    Thanks for writing in! The code looks fine. Copy all your custom CSS rules into an online tool like CSS Lint (http://csslint.net/) and see if you’re getting any errors.

    Let us know how it goes.
    Thanks!

    #1326063

    scottdefusco
    Participant

    I think there is a broader issue here. I’m wrestling with an issue where any changes I make that are mobile responsive, such as hiding a section based on screen width or using a mobile plugin, work fine through a desktop browser but do not work on an actual device browser, like mobile Safari or Chrome. One of your folks was trying to help me with this and I was able to clone the page and it resolved the problem, however now any changes I try to make are not being realized on mobile browsers.

    So, to simplify the issue, any changes I make for my site to be mobile responsive are not showing up on an actual mobile device.

    • This reply was modified 3 months, 1 week ago by  scottdefusco.
    #1326564

    Lely
    Moderator

    Hello There,

    I did check your site source code and notice that above CSS was added inside CSS comment. See attached screenshot.

    /* This is how we declared multiple line comments in CSS. Anything added inside this slash/asterisk - asterisk/slash is considered as comment */
    Your CSS is this:

    	/*
    You can add your own CSS here.
    
    @media (max-width: 979px) {
    	.masthead-inline .x-btn-navbar {
    		display: none !important;
    	}	
    }
    
    Click the help icon above to learn more.
    */

    It is inside a comments. Should be like this

    	
    /* You can add your own CSS here. Click the help icon above to learn more.*/
    
    @media (max-width: 979px) {
    	.masthead-inline .x-btn-navbar {
    		display: none !important;
    	}	
    }
    
    

    Hope this helps.

    Attachments:
    You must be logged in to view attached files.
    #1326672

    scottdefusco
    Participant

    You guys are awesome. Stupid mistake. Thanks for the help.

    I did notice that this remove menu options but the header is still showing. Is there CSS I can add to hide the header on mobile as well?

    #1326817

    Rupok
    Moderator

    Hi there,

    Do you want to hide full header? You can use this :

    @media (max-width: 979px) {
    header.masthead {
      display: none;
    }
    }

    Cheers!

    #1326979

    scottdefusco
    Participant

    That did it! You guys are the best. Thanks.

    #1327106

    Darshana
    Moderator

    Glad we were able to help 🙂

Purchase for access

Buy a copy of X for access to our member center.

Buy