Search the Community

I've implemented this Responsive Topnav Example and would like to know how I can highlight the selected menu item in the top navigation bar in a different color.

Hello, I recently added different menu navigations for specific pages on my site: millcityenergy.com using the wordpress plug-in page specific menu items while it works fine for desktop, the mobile version displays all the pages in the dropdown (select a page). I've tried different custom css codes and as a novice, I have been unsuccessful. Screenshot attached. Any idea of how to narrow down the pages and/or follow the same navigation as desktop? Any help will be greatly appreciated. Thank you, Lauren

Hello Forum, Okay so this is probably the easiest question to answer but I am new to coding and CSS/HTML so I hope someone can answer this. Created a Navigation Menu on my website and added code to center the Links to the center of the page which works fine but as you can see the picture I attached, the links are sitting below the blue menu bar. It looks like there is a line height issue or something. I went through a bunch of the demos on this site and couldn't get it right. This is the code I am using to get it centered: <style type="text/css"> #primary-menu-container ul{text-align:center;} #primary-menu-container ul li { float: none; display: inline-block; } h1#site-logo{ display:none; } #primary-menu-container { float: none; clear: both; margin: auto; width: 75%; } </style> Thanks to who ever responds and its much appreciated. Website if you want to see the whole thing is: www.ChrisReedTattoo.com

I am trying to get my navigation menu to show up in 2 columns for the sub menu since it is a long list but havent been successful yet. Here is the css script: .navigation { position: relative; top: 30px; clear: both; margin: 0 -10px 0; padding: 0 10px; border-width: 1px; border-style: solid; border-color: #343131; } .ie9 .navigation, .not-ie .navigation {z-index: 30;} .navigation { background: #f7f5ed; /* Old browsers */ background: -moz-linear-gradient(top, #f7f5ed 0%, #ebe9e2 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7f5ed), color-stop(100%,#ebe9e2)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #f7f5ed 0%,#ebe9e2 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #f7f5ed 0%,#ebe9e2 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #f7f5ed 0%,#ebe9e2 100%); /* IE10+ */ background: linear-gradient(to bottom, #f7f5ed 0%,#ebe9e2 100%); /* W3C */ } .navigation { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0 0 3px rgba(0,0,0,.05); -moz-box-shadow: 0 0 3px rgba(0,0,0,.05); box-shadow: 0 0 3px rgba(0,0,0,.05); zoom: 1; } .ie7 .navigation, .ie8 .navigation { behavior: url(../js/PIE.htc); box-shadow: 0 0 3px rgba(0,0,0,.02); } .navigation > ul > li { position: relative; float: left; margin: 0; list-style: none; } .ie7 .navigation > ul > li { height: 60px; } .navigation > ul > li > a { position: relative; display: block; padding: 18px 22px; text-align: center; color: #2706FD; font-weight: 600; font-size: 14px; font-family: 'Open Sans', Arial; text-transform: uppercase; } /* Dropdown */ .navigation ul ul { position: absolute; left: 0; z-index: 9; display: none; margin-top: -5px; padding-top: 5px; width: 180px; background-color: #f7f5ed; } .not-ie .navigation ul ul { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .navigation > ul ul:after { position: absolute; top: -8px; left: 25px; width: 13px; height: 8px; background-image: url(../images/icons/sup-arrow.png); background-repeat: no-repeat; content: ""; } .navigation ul ul { -webkit-box-shadow: 0 0 4px rgba(0,0,0,.2); -moz-box-shadow: 0 0 4px rgba(0,0,0,.2); box-shadow: 0 0 4px rgba(0,0,0,.2); } .ie8 .navigation ul ul { behavior: url(../js/PIE.htc); box-shadow: 0 0 4px rgba(0,0,0,.1); } .navigation ul ul li {position: relative;} .navigation ul ul a { display: block; padding: 7px 20px; border-width: 0 0 1px 0; border-style: solid; border-bottom-color: #e4e3db; text-align: left; color: #FF0000; font-weight: 600; font-size: 13px; font-family: 'Open Sans', Arial; } .not-ie .navigation ul ul a { background: -moz-linear-gradient(top, #f7f5ee 0%, #eeece4 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7f5ee), color-stop(100%,#eeece4)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #f7f5ee 0%,#eeece4 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #f7f5ee 0%,#eeece4 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #f7f5ee 0%,#eeece4 100%); /* IE10+ */ background: linear-gradient(to bottom, #f7f5ee 0%,#eeece4 100%); /* W3C */ } .ie8 .navigation ul ul a {background: #f7f5ee; /* Old browsers */} .navigation ul ul li:last-child > a { -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; } .navigation > ul ul li:hover > a, .navigation > ul ul li.current-menu-item > a, .navigation > ul ul li.current-menu-parent > a, .navigation > ul ul li.current-menu-ancestor > a { background: #36332e; color: #f2f1e9 !important; } .ie8 .navigation > ul ul li:hover > a, .ie8 .navigation > ul ul li.current-menu-item > a, .ie8 .navigation > ul ul li.current-menu-parent > a, .ie8 .navigation > ul ul li.current-menu-ancestor > a { background: #36332e !important; color: #f2f1e9; } .navigation ul ul li .rightarrowclass { position: absolute; top: 50%; right: 10px; margin-top: -5px; width: 7px; height: 10px; background-image: url(../images/icons/rightarrowclass.png); background-repeat: no-repeat; } .navigation > ul ul li:hover .rightarrowclass, .navigation > ul ul li.current-menu-item .rightarrowclass, .navigation > ul ul li.current-menu-parent .rightarrowclass, .navigation > ul ul li.current-menu-ancestor .rightarrowclass {background-position: bottom;} /* Sub Dropdown */ .navigation ul ul ul { top: 0 !important; left: 175px; } .navigation ul ul ul:after {display: none;} .not-ie .navigation ul ul ul { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } /* Nav Responsive */ .navigation .nav-responsive { display: none; margin: 15px 0; padding: 4px 8px; width: 100%; border-color: #fff; background-color: #fff; background-image: url(../images/nav-bg.png); background-position: right center; background-repeat: no-repeat; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } Thank you in advance for the help.

Hello Everyone, How do I create this using UL and LI instead of using DIV tags? Please help...