Title: Help Changing Menu Bar
Last modified: August 21, 2016

---

# Help Changing Menu Bar

 *  [RCurtis](https://wordpress.org/support/users/rcurtis/)
 * (@rcurtis)
 * [11 years, 11 months ago](https://wordpress.org/support/topic/help-changing-menu-bar/)
 * Hi!
    I’ve been using WordPress.com for a year and 1/2 and just switched to WordPress.
   org for more flexibility (my domain is currently still pointing to my old website
   and I’m working on setting up the new one). I don’t really know coding, but am
   able to figure out a few basic things. There is one section I haven’t been able
   to get though and a little help would be greatly appreciated.
 * If you look at my old website here [http://rebeccacurtisphotography.com/](http://rebeccacurtisphotography.com/)
   you can see the menu bar. It has separators between each menu item. I’d like 
   to add that to my new site (temporary URL) here… [http://50.22.11.59/~rebeccac/](http://50.22.11.59/~rebeccac/)
 * The other thing I haven’t been able to figure out is the “line” that is on either
   side of my menu bar. I like the old one that runs “behind” my menu bar. The new
   website has a line running under the menu. I’d like to move it to match the old
   one.
 * And lastly – on the new website – the dropdowns aren’t centered under the menu
   items. I’d like them to drop down in the center of the menu item word.
 * I’ve been using the Simple Custom CSS plugin to modify my theme. Here’s the coding
   for the Main Navigation Bar. If you have suggestions on how to make these changes,
   please be specific as I’m not “code literate”! Thank you in advance 🙂
 * _[ Moderator note: code fixed. Please [post code using backticks or code button](http://codex.wordpress.org/Forum_Welcome#Posting_Code).]_
 *     ```
       MAIN NAVIGATION
       ================================================ */
       #main-nav {
       	width: 100%;
       	margin: 0px 0 0;
       }
       #main-nav li {
       	position: relative;
       	display: inline-block;
       	margin: 0;
       	padding: 8 8 8px;
       	list-style: none;
       }
   
       /* main level link */
       #main-nav a {
       	font: normal .9em/1em Georgia, sans-serif;
       	text-transform: Capitalize;
       	text-decoration: none;
       	color: #959595;
       	padding: 8px 8px;
       	margin: 0 6px 0 0;
       	display: block;
       }
       #main-nav a:hover,
       #main-nav .current_page_item a,
       #main-nav .current-menu-item a,
       #main-nav .current_page_item a:hover,
       #main-nav .current-menu-item a:hover {
       	color: #000;
       }
   
       /* sub-levels link */
       #main-nav ul a,
       #main-nav .current_page_item ul a,
       #main-nav ul .current_page_item a,
       #main-nav .current-menu-item ul a,
       #main-nav ul .current-menu-item a  {
       	color: #666;
       	font-size: .875em;
       	line-height: 1.2em;
       	font-weight: normal;
       	text-transform: none;
       	padding: 6px;
       	margin: 0;
       	display: block;
       	background: none;
       	border: none;
       }
       /* sub-levels link :hover */
       #main-nav ul a:hover,
       #main-nav .current_page_item ul a:hover,
       #main-nav ul .current_page_item a:hover,
       #main-nav .current-menu-item ul a:hover,
       #main-nav ul .current-menu-item a:hover {
       	background: #F3F3F3;
       	color: #000;
       }
       /* dropdown ul */
       #main-nav ul {
       	position: absolute;
       	top: 35px;
       	left: 50%;
       	width: 150px;
       	margin: 15px 0 0 -100px;
       	padding: 0px 0;
       	background: #fff;
       	border: solid 1px #ccc;
       	list-style: none;
       	z-index: 100;
       	visibility: hidden;
       	opacity: 0;
       }
       #main-nav ul:before {
       	position: absolute;
       	display: block;
       	content: ' ';
       	width: 0;
       	height: 0;
       	top: -8px;
       	left: 50%;
       	margin-left: -8px;
       	border-bottom: 8px solid #ccc;
       	border-left: 8px solid transparent;
       	border-right: 8px solid transparent;
       	z-index: -1;
       }
       #main-nav ul li {
       	background: none;
       	padding: 0;
       	margin: 0;
       	display: block;
       }
   
       /* sub-levels dropdown */
       #main-nav ul ul {
       	left: 100%;
       	top: -6px;
       	margin-left: 15px;
       	margin-top: 0;
       }
       #main-nav ul ul:before {
       	top: 5px;
       	left: -17px;
       	margin-left: 0;
       	border-right: 8px solid #ccc;
       	border-top: 8px solid transparent;
       	border-bottom: 8px solid transparent;
       }
   
       /* show dropdown ul */
       #main-nav li:hover > ul {
       	visibility: visible;
       	margin-top: 0;
       	opacity: 1;
       }
       #main-nav ul li:hover > ul {
       	margin-left: 0;
       }
       ```
   

The topic ‘Help Changing Menu Bar’ is closed to new replies.

## Tags

 * [dropdown](https://wordpress.org/support/topic-tag/dropdown/)
 * [menu](https://wordpress.org/support/topic-tag/menu/)

 * 0 replies
 * 1 participant
 * Last reply from: [RCurtis](https://wordpress.org/support/users/rcurtis/)
 * Last activity: [11 years, 11 months ago](https://wordpress.org/support/topic/help-changing-menu-bar/)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics