Buttons on Menus/Nav Bar

Tagged: buttons, nav bar, nav menu

This topic has 6 replies, 2 voices, and was last updated 10 years, 6 months ago by Wes.

Viewing 7 posts - 1 through 7 (of 7 total)

Author

Posts
October 11, 2013 at 4:29 pm #8065
danielghebert
Customer
Is there a way to add buttons on sections of the nav bar/menu? We have it on our current site that was designed by and agency, but would like to have it on this theme as well. I’m not that technical, so I don’t really know how they did it.

Current site: http://innetwork.net

Staging site with Epik Theme: http://innetworknet.staging.wpengine.com

Thanks!
October 11, 2013 at 8:22 pm #8067
danielghebert
Customer
I actually found out how to add buttons. Created a custom class for buttons, and added the class to the custom menu. However, the buttons don’t align properly with the rest of the menu. Do you know what I need to add in the CSS to make the text align?

Here’s the code I used for the custom button class:
```
.menuorange {
	background-color: #ff8000;
	-webkit-border-top-left-radius: 3px;
	border-top-left-radius: 3px;
	-webkit-border-top-right-radius: 3px;
	border-top-right-radius: 3px;
	-webkit-border-bottom-right-radius: 3px;
	border-bottom-right-radius: 3px;
	-webkit-border-bottom-left-radius: 3px;
	border-bottom-left-radius: 3px;
	border: 1px solid #d16704;
	display: inline-block;
	color: #ffffff;
	font-size: 13px;
	height: 30px;
	line-height: 30px;
	width: 58px;
	text-align: center;
}

.menuorange:hover {
	background-color: #fa902d;
}

.menuorange:active {
	position: relative;
	top: 1px;
}
```
http://innetworknet.staging.wpengine.com/

Thanks!
October 12, 2013 at 12:02 pm #8087
Wes
Moderator
Try adding this –
```
.menuorange a {
    padding: 0;
    text-align: center;
}
```
October 18, 2013 at 2:03 pm #8266
danielghebert
Customer
I tried that, but it didn’t work. I found out how to position/ align the buttons with the rest of the nav bar:

I added this to .menugreen:
```
position: relative;
	left: -5px;
	top: -3px;
```
And this to .menuorange:
```
position: relative;
	top: -3px;
```
The only thing now is that it does a funky motion when I hover over it. I tried adding the same codes to menugreen:hover, but didn’t work.

Getting there! 🙂
October 18, 2013 at 10:42 pm #8278
Wes
Moderator
Looks like it’s coming from this code you added –
```
.genesis-nav-menu .menu-item:hover {
    position: static;
}
```
and this –
```
.menuorange:hover {
    background-color: #fa902d;
    color: #fff;
    position: relative;
    top: -2px;
}
```
It looks like there is another one with top: -3px; …..this is all what is causing the hover movement that you see.
October 19, 2013 at 11:11 am #8305
danielghebert
Customer
Fixed it! I switched the position:static to this:
```
.genesis-nav-menu .menu-item:hover {
    position: relative;
}
```
And got rid of the position:relative in the menuorange:hover class. 🙂

Thanks Wes!
October 19, 2013 at 11:19 pm #8333
Wes
Moderator
You’re Welcome
Author

Posts

Viewing 7 posts - 1 through 7 (of 7 total)

The topic ‘Buttons on Menus/Nav Bar’ is closed to new replies.