Removing active line under navbar " home " button

[devinnunn]

Would it be possible to remove the active line underneath the home button and change the underlines to black instead of white?

[christopher]

Hi Devin,

I would want to share with you with the few points that I think will improve the support experience and will help us serve you better:

1. Please always include the link of the exact page or website that you are talking about.
2. Be more descriptive and explain the matter better to understand the question.
3. Use screenshots of the place that you have questions so that we can identify the issue to be able to help you better.

If you are talking about the section below:

Then, you need to add the CSS code below to X > Theme Options > CSS:

.x-index-filters-menu li:hover a {
    box-shadow: 0 2px 0 0 rgb(0,0,0);
}

If not, you will need to give us more detailed information to follow up.

Thank you.

[devinnunn]

Thanks, Christopher. I was actually talking about something else, but wanted to remove that as well so it worked out. There is still some text there though

I also have like 3 more things that I want to change or remove as well. I would like to know how I can add text right below the logo on different pages, like this

I’m wondering if it is also possible to remove the white line where it has the home button, blog text and how-to guide text as well.

I was originally asking how I could remove this black line under the home button, though, and instead make it to where it only shows up when hovering over it. Right now it shows under every menu page, but in white. I would like to know how to change the color of that too.

Sorry for all the questions. I figured I would get it out the way now so I wouldn’t have to keep asking. Thank you for your patience.

[devinnunn]

Yes, that’s my site. Sorry for the late reply.

[lely]

Hello There,

For the text below the logo, we can use utilise, SLIDER SETTINGS BELOW MASTHEAD available on pages. You may use Revslider to single slide to create how the text look on the page. Then on specific page where you want to to show it, under Page Settings > Slider settings below masthead: choose this slider. See this guide: https://theme.co/apex/forum/t/features-sliders/97

That entire box with home button, blog text and post title is called breadcrumb. We can hide it using the following CSS:

.x-breadcrumb-wrap {
     display: none;
}

Add the css on Theme Options > Global CSS.

The underline under Home is the settings under Theme Options > Header : Navbar Links and Navbar Links hover. See this:
https://screencast-o-matic.com/watch/cFi0i3FJCf

Navbar Links: Default color of the menu link
Navbar Links hover: Color of the underline for current page menu and the active link

Now if you don’t want that underline on active page link, please try adding this custom CSS:

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

Check this custom CSS:

.x-navbar .desktop .x-nav > li.tax-item-82 > a:hover, .x-navbar .desktop .x-nav > li.tax-item-82.x-active > a {
    box-shadow: 0 2px 0 0 #ffffff;
}

That custom CSS is the reason why other main navigation hover underline is white in color. Remove it and you can see it will be the same as the color underline like the homepage.

Hope this helps.

[devinnunn]

Thanks so much, Lely, that halped a bunch. Is there a way to remove this. It’s on the homepage.

My menu elements are actually categories, so I’m unable to find the option to add text. Can this only be done on pages ?

[basanta]

Hi There,

Thanks for writing in again!

Please add this CSS to remove the text.

.option-set.unstyled {
 display: none;
}

Hope this helps!

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

Chrome DevTools  |  Tools for Web Developers  |  Google...

Thanks.