Adjusting button the main navigation

[alanjonesonline]

Hi there,

I have added a button to my main navigation.

I have 3 questions:

• How I can adjust it’s height alignment?
• Is it possible to remove the grey line from appearing above the button (only) on hover?
• How can I adjust the colour of the button? I would like the black font and border colour to be the same grey as the font colour in the footer. Hover colours can remain the same.

Appreciate your help as always.

Thank you.

www.alanjonesonline.com

[nico]

Hi @alanjonesonline,

Thanks for writing in.

Add the code in your custom CSS:

.x-navbar .desktop .page-item-1813 .x-nav > li > a:not(.x-btn-navbar-woocommerce){
padding-top: 10px;
} 

x-navbar .desktop .x-nav > .page-item-1813 .current-menu-item > a {
box-shadow:none;
}

.page-item-1813 .x-btn{
color:rgb(153,153,153);
}

Let us know how it goes.

Thanks.

[alanjonesonline]

Hi There

Thank you.

I followed an online xtheme demo video and am almost there.

After creating an id in my menu description, this is the code I have added to my custom css. It works great.

#navbtn{
  background-color: #999999;
  color: white;
  font-size: 83%;
  border: none;
  margin-top: -6%;
  border-radius: 3px;
  letter-spacing: 1px;
}

#navbtn:hover{
  background-color: #272727;
  color: white;
  font-size: 83%;
  border: none;
  margin-top: -6%;
  border-radius: 3px;
  letter-spacing: 1px;
} 

Question: What do I need to add to this code here so my button in the navigation remains on colour #272727 when I am active in the “The Blog”?

Thank for your help.

[friech]

Hi There,

Add this in your Theme Options > CSS

.blog #navbtn {
	background-color: #272727;
}

If you want it to have a hover effect, add this as well.

.blog #navbtn:hover {
	background-color: #ad1100;
}

Hope it helps,
Cheers!

[alanjonesonline]

Hi there,

Thank you. That worked.

When I click into a post and click the tags and categories it the button goes back to the light grey colour. Is it possible to have the button remain colour #272727 when I’m actually in a post and searching the blog.

Appreciate your help.

Cheers,
Alan

[christopher]

Hi there,

Please kindly also add the code below to X > launch > Options > CSS:

.current_page_parent #navbtn {
    background-color: #272727;
}

I suggest that you give a try to learn details about how you can get the correct selectors of the CSS and code yourself so that you will not rely on us for each and every small tweak. To get started I suggest that you check this video:

Thank you.