Styling Header Menu 2019 Version

[oblaum]

hello,

i wish to have a menu item in other style. e.g. like this:

i found a solution from 2017 in this forum (which does not work anymore):
https://theme.co/apex/forum/t/styling-header-menu/6731

in the latest of wordpress and x theme i do not find the class anymore.

how to do this?

thanks
oli

[christian]

Hey Oli,

The Class field is a WordPress feature. Please follow the instruction again as it still works. Ensure the Class field is enabled in the Advanced Menu Properties.

Please just note that we will not be responsible for coding the design of the menu item. I’d recommend that you use upgrade to Pro so you can use the Header Builder to add and design a button separately.

Thanks.

[oblaum]

great! thank you!

[oblaum]

ps in the meantime i’ve checked the css deeply and found this for the last menu item, which works great, too.

.x-navbar-fixed-top-active .masthead-inline .desktop .x-nav>li:last-child>a

but when using this for the mobile version. the button is far to long (as long as the menu). how to fix this?

.x-navbar-fixed-top-active .masthead-inline .mobile .x-nav>li:last-child>a {
  	margin-top: 29px;
  	margin-left: 12px;
  	margin-right: 20px;
  	background: #447b19;
  	padding: 9px 20px 0px 15px;
  	border-radius: 20px;
	}

i have tried to use margin-right for this. but as it is dynamic it does not work.

dev: http://gelenkalbin.oblaum.com

thanks
oli

[rad]

Hi Oli,

Please add inline-block to your CSS to make sure it works as a button.

.x-navbar-fixed-top-active .masthead-inline .mobile .x-nav>li:last-child>a {
  	margin-top: 29px;
  	margin-left: 12px;
  	margin-right: 20px;
  	background: #447b19;
  	padding: 9px 20px 0px 15px;
  	border-radius: 20px;
display: inline-block;
	}

Hope this helps.

[oblaum]

i see display: inline-block; very well! works great! thank you, rad!

[rad]

You’re most welcome!

[oblaum]

works everything great except the underline effect. when the page with the button is active i do not want to have it. see screenshot. how to fix this?

live: https://gelenkalbin.oblaum.com/kaufen/

thanks
oli

[friech]

Hi Oli,

To remove that underline, please add this to Theme Options > CSS

.x-navbar .desktop .x-nav>li>a:hover>span, .x-navbar .desktop .x-nav>li.x-active>a>span, .x-navbar .desktop .x-nav>li.current-menu-item>a>span {
	box-shadow: none !important;
}

You can find the proper CSS code selector using the Chrome browser Developer Toolbar
For the CSS code itself, I suggest that you get started with this tutorial

Hope it helps,
Cheers!

[oblaum]

hey friech,

thank you very much. this helped a lot. i could not find it in the safari dev. i will try chrome dev tool next time.

i’ve modified it for just the last menue item. (if another user is looking for a solution like this.)

.x-navbar .desktop .x-nav>li:last-child>a:hover>span, .x-navbar .desktop .x-nav>li.x-active:last-    child>a>span, .x-navbar .desktop .x-nav>li.current-menu-item:last-child>a>span {
    	box-shadow: none !important;
    }

thanks for the great support!
oli

[lely]

You’re always welcome Oli!

Cheers.