Support » Theme: Sketch » disable mobile ‘hamburger’ menu on desktop

  • Resolved marczr

    (@marczr)


    Love the look of the theme, but I’m trying to get the main navigation menu to display as a normal horizontal list on desktop browsers, any help appreciated. I’ve set up a child theme to make changes, thanks
    As per the image shown on the theme page wordpress.org/themes/sketch/

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

Viewing 3 replies - 1 through 3 (of 3 total)
  • sacredpath

    (@sacredpath)

    Automattic Happiness Engineer

    Hi there, the menu changes to the toggle at 1280px and narrower for touch devices (tablets and phones). We can adjust that so that it happens at a narrower screen/window width. In the following, I’ve set things so that the change occurs for screens/windows 1024px or narrower.

    @media screen and ( min-width: 1024px ) and (max-width: 1281px) {
      .menu-toggle {
        display: none;
      }
      .site-logo {
      	max-height: 100px;
      }
      .has-site-logo .main-navigation {
        height: 100px;
      }
      .has-site-logo .main-navigation > div,
      .has-site-logo .main-navigation > ul {
    	position: relative;
    	top: 50%;
    	-moz-transform: translateY(-50%);
    	-webkit-transform: translateY(-50%);
    	transform: translateY(-50%);
      }
      .main-navigation {
        font-size: 0.8125em;
        line-height: 2.09231em;
        clear: none;
        float: right;
        max-width: 50%;
        text-align: right;
      }
      .main-navigation ul:first-child {
    	  display: block;
      }
      .main-navigation ul li {
        display: inline-block;
      }
      .main-navigation ul li:hover > ul,
      .main-navigation ul li.focus > ul {
        display: block;
        opacity: 1;
        visibility: visible;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
      }
      .main-navigation ul a {
        border-bottom: 0;
        padding: 5px 0 5px 14px;
      }
      .main-navigation ul ul {
        background: white;
        border: 1px solid #eeeeee;
        display: none;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
        float: left;
        opacity: 0;
        padding: 0 7px;
        position: absolute;
        top: 27px;
        left: 0;
        text-align: left;
        visibility: hidden;
        z-index: 99999;
      }
      .main-navigation ul ul li {
        border-bottom: 1px solid #eeeeee;
        padding: 5px 5px 4px;
      }
      .main-navigation ul ul li:last-of-type {
        border-bottom: 0;
      }
      .main-navigation ul ul li a {
        line-height: 1.5;
        padding: 5px;
        width: 180px;
      }
      .main-navigation ul ul ul {
        left: 100%;
        top: 0;
      }
      .main-navigation ul ul li a,
      .main-navigation ul ul ul li a,
      .main-navigation ul ul ul ul li a {
        padding-left: 5px;
      }
    }

    @sacredpath thank you very much for your help !! works perfectly. Sorry for the delay in replying. I’m working on a 13″ macbook with a 1280 screen so hadn’t seen that the mobile menu reverted to a standard menu at all.

    sacredpath

    (@sacredpath)

    Automattic Happiness Engineer

    You are welcome.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘disable mobile ‘hamburger’ menu on desktop’ is closed to new replies.