style menu item as button

dayday

hi there,

I'd like to style a specific menu-item into a button. In the file attached you can see that I tried this with the menu option 'Contact'. I am almost there, but the menu-text is being pushed down. Here is the css used.

.menu-popup{
background: #c39442;
height:35px;
padding: 0 20px 0 20px;
border-radius: 25px;
}

Do you have some advise for me on how to style this the right way?

Thx, André

Air

Hey :-)

As there is lot of styling based on the line-height property, it could be hard to achieve what you like.

You have to consider also what will happen with this in mobile menu, as these styles will affect it as well.

Best I could come up is changing your styles to something like this:

.menu-popup{
	background: #c39442;
	height:35px;
	padding: 0 20px 0 20px;
	border-radius: 25px;
	vertical-align: 46px !important;
}
.menu-popup a {
    line-height: 35px !important;
    height: 35px !important;
}

However, because of using !important it is not best and elastic solution.

To use it only for normal menu, you could wrap this whole style like this:

@media only screen and (min-width: 1025px) {
	.menu-popup{
		background: #c39442;
		height:35px;
		padding: 0 20px 0 20px;
		border-radius: 25px;
		vertical-align: 46px !important;
	}
	.menu-popup a {
		line-height: 35px !important;
		height: 35px !important;
	}
}

With kind regards.

dayday

I understand the complexity. But your proposal works for me (for now ;-0). Thanks a lot for your help.

Best, André

Air

Great to hear!

Have a great weekend!