Support » Theme: Ignite » [Pro:] css for a second navigation menu before content

  • Resolved ArnoAnou

    (@arnoanou)



    I added a second navigation menu right above content (only available in the pro variant), but since we will use a different (Compete) theme I upload it here so it may be useful to someone else.

    Create a html-widget in the ‘Before Main Content’ widget area, use a ul list and li list items with the classes named in the following code for your menu items. Beware: With doing this you can’t use different widgets for this widget area without having them look silly. Copy and paste the following code into your ‘Custom CSS’ feature in the customizer:

    .sidebar-before-main .widget {padding: 0;}
    
    ul.customnav {margin: 0;}
    
    li.customnav {
    	float: left;
    	width: 33.33%; /* Divide 100% by your number of menu items*/
    	border: none !important;
    	padding: 0 !important;
    	text-align: center;
    }
    
    li.customnav:hover {
    	padding-left: 0em !important;
    	background: none !important;
    }
    
    a.customnav {
    	display: block;
    	background: #ffffff;
    	transition: background 0.2s ease;
    	margin-bottom: 1.84502em;
    	font-size: 0.813em;
    	line-height: 5.231em;
    	letter-spacing: 0.1em;
    	text-transform: uppercase;
    }
    
    a.customnav:hover {
    	background: #e6a117; /* or whatever color suits you */
    	color: #ffffff;
    }
    
    @media (max-width: 384px) {
    	li.customnav {
    		float: none;
    		width: 100%;
    	}
    	a.customnav {
    		margin: 0;
    	}
    }

    Disclaimer: I’m not a coding professional in any way, so there may be more clever or effective ways to achieve this. I tried to keep it short and simple. I hope you like it.

    • This topic was modified 1 year, 1 month ago by  ArnoAnou.
  • The topic ‘[Pro:] css for a second navigation menu before content’ is closed to new replies.