Cyber Week Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Resolved] Menu Styling Changed?

Home Forums Support Menu Styling Changed?

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #152710
    Dee Broughton

    Hi, Tom – Been a while!

    I think maybe my css menu stying on the mobile view (squashed browser view, I mean) changed. I think I had a short red menu over to the left? But it’s back to a default, full width, transparent thing. Did something change that I can fix now?

    Here’s a demo site: http://knowinghappy.com/

    #152735
    Tom
    Lead Developer
    Lead Developer

    Hi Dee,

    A while back we changed the mobile menu element from a regular link (<a>) into a button (<button>).

    Maybe your custom CSS needs some tweaking to reflect that change?

    Let me know 🙂

    #152892
    Dee Broughton

    Yes, that’s what I thought. Since I don’t use the sites with mobile, I don’t notice these things until a client points it out. Can you tell me what to change, please?

    #152908
    Tom
    Lead Developer
    Lead Developer

    What CSS were you using before?

    #152910
    Dee Broughton

    I think this includes all of the menu stuff.

    /* Enter Your Custom CSS Here */
    
    /*media view for mobiles less than 768*/
    
    @media screen and ( max-width: 768px ) {
    
      .menu-toggle {
        font-size: 14px !important;
        padding-left: 14px;
        padding-right: 6px;
        box-shadow: 1px 1px 4px #111;
        /*background: rgba(13,10,3,1);*/
        background: rgba(103,13,4,1);
        /*background: rgba(12,9,4,1);*/
        text-align: left !important; 
        position:fixed; 
        left:0; 
        top: 12% !important;
        border-top-right-radius:2px;
    border-bottom-right-radius:2px;
        z-index: 99999;
      }
      
      .menu-toggle:hover {left:2px;box-shadow: 2px 2px 6px #111;}
      
       h3.menu-toggle:before {
    	content: "\f0c9";
    	font-family: FontAwesome;
    	margin-right: 10px;
      }
      
     .toggled .menu-toggle:before {
    	content: "\f0c9" !important;
    }
      
      .main-nav {
     
        background: rgba(12,9,4,1);
        display: block!important; 
        position:fixed; 
        left:0; top: 12% !important; 
        padding-left: -11px !important;
        padding-right: 18px !important;
        padding-top: 35px !important;
        box-shadow: 1px 1px 3px #000;	
    border-top-right-radius:20px;
    border-bottom-right-radius:20px;
    }
      
     .main-navigation a, .menu-toggle {
        font-size: 14px !important;
        padding-left: 12px !important;
      }
        
    
    }
    /*end small media--------------------------------begin large media*/
    
    @media screen and ( min-width: 769px ) {
    
    }
    
    /*-----------end media*/
    
    .main-navigation {letter-spacing: .09em;}
    
    
    #152911
    Tom
    Lead Developer
    Lead Developer

    Anywhere you have .menu-toggle or a.menu-toggle, change to button.menu-toggle.

    That should be it 🙂

    #152913
    Dee Broughton

    Thanks, I changed that, but something is still missing. Sent you link email.

    #153020
    Tom
    Lead Developer
    Lead Developer

    Try adding this:

    button.menu-toggle {
        width: auto;
    }
    #158910
    Dee Broughton

    Thanks.

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