Re-create menu item

[logoglo]

Hi there. Is it possible to re-create the “lets work together” button in theme X nav bar from this page:

https://loudmouse.com/

?

Thanks.

[Prasant]

Hello @logoglo,

Thanks for asking.

You can add the menu item from Appearance > Menu. Next, you can add the Class name and then use CSS to style the element. If you would like to replicate the same style you can add following CSS under X > Theme Options > CSS:

.custom-menu-item {
    background-color: #ffbf1d;
    border-color: #ffbf1d;
    border-radius: 30px;
}

.custom-menu-item a {
    color: #303030!important;
}

Thanks.

[logoglo]

Awesome, I will give this a try, how will it look in the mobile menu though?

[thai]

Hi There,

The custom menu item on the mobile version will look like this:

Let us know how it goes!

[logoglo]

OK, awesome, off to a good start. A couple of issues though.

(see it here http://entrecoach.kinsta.com)

1: The menu item is really tall, it should be more pill like, its filling the nav bar height.

2: Its still showing the hover line over that menu item, I want it on the other menu items, just not on this.

3: On the mobile view, the button looks neat, but there are black lines showing over it, and the text is sitting out of the pill, to the left:

4: Also, can I add a hover change of color to it?

Thanks for your help with this.

[paul.r]

Hi,

Please replace this code

.custom-menu-item {
    background-color: #ffbf1d;
    border-color: #ffbf1d;
    border-radius: 30px;
}

.custom-menu-item a {
    color: #303030!important;
}

with this

.custom-menu-item span {
    color: #303030!important;
    background-color: #00bbe3;
    border-color: #00bbe3;
    border-radius: 30px;
    padding: 10px;
    margin-top: -10px;
}

/* hover color */
.custom-menu-item a:hover span {
    background-color: red;
    border-color: red;
}


body .x-navbar .mobile .x-nav li>a {
    border-color: #fff;
    color:#fff;
}

body .x-navbar .mobile .custom-menu-item span {
     margin-top:0 !important;
}

I was able to come up with this css code with the help of Google Chrome inspect element.

Hope that helps.

[logoglo]

Thanks…but…how do I get rid of the top hover “blue bar” on the custom menu item? I want it on the normal menu items in the nav bar, just not on the “get started” item. Thanks.

Also, the mobile menu, the HOME item is black, and has lost the hover, should be white, and hover to blue. The custom menu item looks great, thanks.

Thanks.

[ruenel]

Hello There,

Thanks for writing in! You will need to update your code into this:

.x-navbar .desktop .x-nav > .custom-menu-item a:hover {
    box-shadow: none;
}

.custom-menu-item a span {
    color: #303030;
    background-color: #00bbe3;
    border-color: #00bbe3;
    border-radius: 30px;
    padding: 10px;
    margin-top: -10px;
}

.custom-menu-item a:hover span {
    color: white !important;
}

Please let us know if this works out for you.

[logoglo]

Thanks, that worked for the desktop menu, but if you have a look at the mobile menu, the HOME item is black, should be the same as desktop colors right, so white, hover blue.

[paul.r]

Hi,

Please add this code as well.

body .x-navbar .mobile .x-nav li>a {
    border-color: #fff;
    color:#fff;
}

body .x-navbar .mobile .x-nav li>a:hover {
    color:#00bbe3;
}

body .x-navbar .mobile .custom-menu-item span {
     margin-top:0 !important;
}

Thanks

[logoglo]

Thnaks, that has changed the lines to white. The hover works, but the HOME is still black, this should be white.

[ruenel]

Hello There,

Please update the code and use this:

body .x-navbar .mobile .x-nav li>a {
    border-color: #fff;
    color:#fff;
}

body .x-navbar .mobile .x-nav .current-menu-item > a {
     color: #fff;
}

body .x-navbar .mobile .x-nav li>a:hover {
    color:#00bbe3;
}

body .x-navbar .mobile .custom-menu-item span {
     margin-top:0 !important;
}

We would loved to know if this has work for you. Thank you.

[logoglo]

Perfect! thanks for all your help.

[ruenel]

You’re welcome!
We’re just glad we were able to help you out.

[logoglo]

Hey, sorry to re-open this.

http://entrecoach.kinsta.com/

The hover on the open pages have gone, so normally, click on HOME, when you are on the home page, it should be highlighted blue right?

[ruenel]

Hello There,

The issue happened because of this code:

.x-navbar .desktop .x-nav > li > a, 
.x-navbar .desktop .x-nav > .x-active > a, 
.x-navbar .desktop .x-nav > .current-menu-item > a {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    color: white;
}

Did you added this? Please have it updated and use this instead:

.x-navbar .desktop .x-nav > li > a, 
.x-navbar .desktop .x-nav > .x-active > a, 
.x-navbar .desktop .x-nav > .current-menu-item > a {
    color: white;
}

Hope this helps.

[logoglo]

Perfect! thanks.

[nico]

Hi @logoglo,

Happy to hear that.

Feel free to ask us again.

Thanks.