• I need help on centering my submenu horizontal that is 100% width of the site. I am wanting it to look like my menu bar.

    Here is a simple of what I am looking for-

    http://www.martinauer.at

    The website is theozarksconnection.com/DEV

    http://theozarksconnection.com/DEV

    Site Navigation
    ---------------------------------------------------------------------------------------------------- */
    
    .genesis-nav-menu {
    	clear: both;
    	color: #fff;
    	font-family: Lato, sans-serif;
    	font-size: 14px;
    	font-weight: 400;
    	letter-spacing: 1px;
    	line-height: 1.5;
    	width: 100%;
    }
    
    .genesis-nav-menu .menu-item {
    	display: inline-block;
    	text-align: left;
    }
    
    .genesis-nav-menu a {
    	border: none;
    	color: #000;
    	display: block;
    	padding: 10px 10px;
    	position: relative;
    
    }
    
    .genesis-nav-menu a:hover,
    .genesis-nav-menu .current-menu-item > a {
    	color: #4292E5;
    	font-weight: 900;
    
    }
    
    .genesis-nav-menu .sub-menu .current-menu-item > a,
    .genesis-nav-menu .sub-menu .current-menu-item > a:hover {
    	color: #4292E5;
    
    }
    
    .genesis-nav-menu > .menu-item > a {
    	text-transform: uppercase;
    }
    
    .genesis-nav-menu .sub-menu {
    	left: -9999px;
    	opacity: 0;
    	position: absolute;
    	-webkit-transition: opacity .2s ease-in-out;
    	-moz-transition:    opacity .2s ease-in-out;
    	-ms-transition:     opacity .2s ease-in-out;
    	-o-transition:      opacity .2s ease-in-out;
    	transition:         opacity .2s ease-in-out;
    	width: 100%;
    	z-index: 99;
    
    }
    
    .genesis-nav-menu .sub-menu a {
    	background-color: #000;
    	color: #fff;
    	font-size: 14px;
    	position: static;
    	width: 100%;
    	display: inline-block;
    	text-align: left;
        	left:0;
        	right:0;
    
    }
    
    .genesis-nav-menu .sub-menu a:hover {
    	background-color: #161616;
    }
    
    .genesis-nav-menu .sub-menu .sub-menu {
    	display: inline-block;
    	width: 100%;
    }
    
    .genesis-nav-menu .menu-item:hover {
    	position: static;
    }
    
    .genesis-nav-menu .menu-item:hover > .sub-menu {
    	left: auto;
    	opacity: 1;
    	width: 100%;
    }
    
    .genesis-nav-menu > .first > a {
    	padding-left: 0;
    }
    
    .genesis-nav-menu > .last > a {
    	padding-right: 0;
    }
    
    .genesis-nav-menu > .right {
    	display: inline-block;
    	float: right;
    	list-style-type: none;
    	padding: 280px 0;
    	text-transform: uppercase;
    }
    
    .genesis-nav-menu > .right > a {
    	display: inline;
    	padding: 0;
    }
    
    .genesis-nav-menu > .rss > a {
    	margin-left: 48px;
    }
    
    .genesis-nav-menu > .search {
    	padding: 14px 0 0;
    }
    
    /* Site Header Navigation
    --------------------------------------------- */
    
    .site-header .sub-menu {
    	border-top: 0px solid #39342c;
    }
    
    .site-header .sub-menu .sub-menu {
    	margin-top: 0px;
    }
    
    /* Primary Navigation
    --------------------------------------------- */
    
    .nav-primary {
    	background-color: #39342c;
    }
    
    .nav-primary .sub-menu a:hover {
    	background-color: #39342c;
    	color: #fff;
    }

Viewing 3 replies - 1 through 3 (of 3 total)
  • In this section:

    .genesis-nav-menu .menu-item:hover > .sub-menu {
    	left: auto;
    	opacity: 1;
    	width: 100%;
    }

    Try left: 0 instead of left: auto, and add text-align: center:

    .genesis-nav-menu .menu-item:hover > .sub-menu {
    left: 0;
    opacity: 1;
    width: 100%;
    text-align: center;
    }
    Thread Starter jholcombkw

    (@jholcombkw)

    Thanks stephencottontail. It work for my submenu to center it but not any layer after the submenu.

    Can you clarify what’d you like to achieve with your sub-sub-menus? This is what I see if I hover over Recreation > Sports Complexes (you can’t see my cursor in the screen shot, but I assure you it is there): http://imgur.com/dF1sZ2x

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

The topic ‘horizontal submenu’ is closed to new replies.