Open Navigation Menu By Default

Support Area Forums Umami Open Navigation Menu By Default

  • This topic has 0 replies, 1 voice, and was last updated 10 years ago by Bill Robbins.
Viewing 1 post (of 1 total)
URL to the page in question: http://demo.organizedthemes.com/umami/
  • Author
    Posts
  • #17924
    Bill Robbins
    Moderator

    I was recently asked if it’s possible to have the navigation menu open by default instead of requiring a click first to open it up. That can be done. Here’s how:

    1. Go to the Theme Options page and select the Advanced tab.
    2. Scroll down to the Custom CSS box and paste this:
      
      @media only screen and (min-width: 1024px) {
      
      	.slicknav_menu {
      		display: none;
      	}
      	
      	#sidebar {
      		z-index: 20;
      	}
      	
      	ul#primary-menu {
      		display: block;
      		list-style-type: none;
      		margin-left: 0;
      		margin-right: 0;
      		text-align: center;
      	}
      	
      	ul#primary-menu a {
      		display: block;
      		padding: 5px;
      	}
      	
      	ul#primary-menu li {
      		position: relative;
      	}
      	
      	ul#primary-menu li.current-menu-item a,
      	ul#primary-menu li.current-menu-item li a:hover,
      	ul#primary-menu li a:hover {
      		background-color: #ADB74B;
      	}
      	
      	ul#primary-menu li.current-menu-item li a {
      		background-color: transparent;
      	}
      	
      	ul#primary-menu li ul {
      		display: none;
      		list-style-type: none;
      	}
      	
      	ul#primary-menu li:hover ul {
      		display: block;
      		position: absolute;
      		left: 200px;
      		top: 0;
      		width: 180px;
      		background-color: rgba(0, 0, 0, 0.8);
      		box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
      	}
      
      }
      
    3. Update your settings.

    That should swap out the default navigation for a more traditional one on screens that are 1024 pixels wide and larger. Below that they’ll still use the click first one. You can change that threshold by changing the min-width: 1024px to the lowest browser size where you’d like to swap out the navigation.

    You’ll need to replace the background color in this spot:

    
    ul#primary-menu li.current-menu-item a,
    	ul#primary-menu li.current-menu-item li a:hover,
    	ul#primary-menu li a:hover {
    		background-color: #ADB74B;
    	}
    

    with yours so it matches the rest of your site too.

    I hope that helps out.

    Thanks,
    Bill

Viewing 1 post (of 1 total)
  • The topic ‘Open Navigation Menu By Default’ is closed to new replies.