Display Mobile menu on desktop view everywhere

  • The request is to display the mobile hamburger menu instead of the current primary navigation. They don’t want the horizontal menu w/text-links to be seen – just the simple 3-bar icon on the right. (maybe the icon should be a bit larger)

    I used the css below on the linked page. What am I missing? The first bit has removed the primary menu as desired, but the hamburger menu does not appear for any view. Only the logo appears.

    It’s a mystery to me as to why it’s not working. Hopefully someone smarter is available to take a peek? Have I used the wrong selectors?

    #g1-primary-nav  {
       display: none;
    	
       }


    @media (min-width: 680px) { 
    #g1-primary-nav-switch  {
      display: block;
      visibility: visible;
    }
    }

    Fingers crossed for a resolution! I’m hopeful it’s a simple one ??

    • This topic was modified 2 months, 3 weeks ago by webworks. Reason: clarification

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter webworks

    (@webworks)

    Maybe another solution is to change the breakpoint of the theme’s mobile menu. But there is no setting for doing that. This theme is called 3clicks. Does anyone know how to find out where the breakpoints are?

    Thread Starter webworks

    (@webworks)

    I’ve tried various settings for the css to have the mobile show for desktop:

    This doesn’t work either ;(

    #g1-primary-nav  {
       display: none;
    	
       }


    @media (min-width: 100px) { 
      #g1-primary-nav-switch::before, #g1-primary-nav-switch::after  {
      display: block;
      visibility: visible;
    }
    }

    Hi @webworks,

    Sorry for late reply. Hope you are doing well today.

    The request is to display the mobile hamburger menu instead of the current primary navigation.

    The client want to show hamburger menu in desktop instead the primary navigation. Isn’t it?.

    The first bit has removed the primary menu as desired, but the hamburger menu does not appear for any view. Only the logo appears.

    Why you removed the primary menu?. We have to change the way primary navigation looking like.

    At first, you have to restore primary as you have before. Then try this CSS.

    @media only screen and (max-width: 2500px) {
        #g1-primary-nav-switch:before, #g1-primary-nav-switch:after {
            width: 30px;
            height: 30px;
            position: absolute;
            left: 0;
            top: 0;
            text-indent: 0;
            text-align: center;
            font: 14px / 30px FontAwesome;
        }
    }

    Let me know how it goes. Remember to take a backup before playing with the code.

    Kind Regards,
    Muhammed Jazeel

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