Change menu button on sketch theme

• 

  eddiemerma · Member · May 13, 2015 at 2:29 pm

  • Copy link
  • Add topic to favorites

  How can I get rid of the menu button in my sketch theme? I see the navigation in words on my chrome browser but I see the menu button on a mac with safari. Is there a way to make it consistent?

  The blog I need help with is: (visible only to logged in users)

• 

  staff-jeanpierreac · Staff · May 13, 2015 at 3:36 pm

  • Copy link

  Hi!

  In fact what you have is a so called responsive behavior of your page. I try to explain it: your page detects your browser width and if it is at least 1281px, it displays letters. In other case, it assumes there is not enough place to show them and uses the MENU button with those three lines. :)

  You can check how it works by resizing your browser window. In my opinion it is cool and avoids problems –odd displaying- when there is not enough space for menu texts in only one line.

  Of course you can decide to display button whatever will be your visitor’s browser width, or the opposite –as I understand you would like-. To force your site to always behave as if width>1280, you can use this fragment of CSS Custom Code (The same your site is right now using, but restricted to big screens )

  .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;
    }

  I hope this helps you. Enjoy blogging!