Adding More Categories on Primary Navigation Menu, without a second row

[Frankie101]

Is there anyway to add more categories on the primary menu (top menu), without adding another row? I am using Parallax theme. Whenever I want to add more categories, the navigation menu creates a second row, even though there is enough space on top. I want it to look similar to this: http://www.selfsufficientblog.com/

[Frankie101]

bump

[Tom]

Centered logo in nav menu:
Sridhar, Brad and Tony have done tutorials for you here:

http://sridharkatakam.com/split-navigation-menu-genesis-using-wp-nav-plus/
Primary Nav on left, Site Title or Logo in the middle and Secondary Nav on right in Genesis

Custom Menu – Logo – Custom Menu Using 3 Widgets in Header

http://www.alphablossom.com/split-genesis-navigation-menu-center-logo-css-only/
http://goo.gl/NVzMR1

More menu items in primary nav:
Once you get your menu and center logo solution in place, see what space you have remaining and how it is filled with your menu items. You may have to reduce font size, padding and margins to make room for more items, then adjust your media queries so they behave well on smaller screen sizes.

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[Frankie101]

I guess my main problem isn't centering the logo, but how to add more categories on top. How do I go about reducing font size, padding, and margins?

[brock]

Do you know exactly how many items you want to add? You are going to have to make changes to the CSS file.

If you are okay with using smaller font-size in the navigation menu then a font size of 12px will make room for about 6 menu items, depending on their text length. You won't have to make any changes to the padding.

.genesis-nav-menu {
 font-size: 12px
}

If you want to make room for even more items you can change the padding and the width of the widget area. These changes allowed me to fit 8 items in there. (Keeping the font-size at 12px)

.site-header .widget-area {
 width: 770px;
}

and

.genesis-nav-menu a {
 padding: 27px 10px;
}

So add these changes to the bottom of your style.css file. Make a note that they are customizations. There needs to be some changes to the media queries as he said. I will see if I can get those for you but I have to run for now!

[Frankie101]

As of right now, I know I want to add two more categories, so total of 6. I know that if I made 5 categories on the menu, the row would double up in size.

[Frankie101]

I changed it to your codes, and subtracted a little more, but the website didn't budge

[Frankie101]

Does having the simple hooks plug in affect the changes I make on CSS?

[Frankie101]

http://www.assistmyrun.com/ Here is my website for reference. When I added the Women and Uncategorized section, the line just continued.

[Tom]

I don't think Parallax Pro was really designed for lots of menu items in header right but this should give you some more room.

In addition to what @brock has suggested, please try the following:

/* line 916 */
.title-area {
    float: left;
    padding: 20px 0;
    width: 360px;       /* make this 300px */
}

/*  line 963 */
.site-header .widget-area {
    float: right;
    text-align: right;
    width: 770px;       /* make this 800px */
}

/* line 987 */
.genesis-nav-menu {
    clear: both;
    color: #fff;
    font-family: Montserrat, sans-serif;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 1px;
    line-height: 1;
    width: 80%;         /* restore this value to 100% */
}

@media only screen and (max-width: 1140px) {
	
	.site-header .widget-area,
	.header-widget-area .widget-wrap,
	.title-area {
		width: 100%;
		clear: both;
		float: none;
		text-align: center;
	}
}

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[Frankie101]

it works! Thank you everyone!

[Author]

Posts