[processpicturesParticipant]

Hello,

There are hairline grey bars on the top and bottom of the nabvar that don’t look good on my site, but I can’t find an option to remove it, or an example of CSS that would remove it. I would very much appreciate any assistance in getting rid of that. Now that my logo is integrated into the navbar and actually extends below the navbar, those grey bars don’t interact well with it. Also, the grey bars look bad on mobile.

Also – as I mentioned above, I modified some CSS to put my logo in the center of the navbar by making the logo a menu item, after finding a post in this forum about it. But that menu item now has the grey bar above it that indicates it is a selected item. If I’m not being totally clear – when you are on the Home page, there is a grey bar above it. When I’m not on the Home page, that grey bar is over the menu item for the page I am on. But this grey bar is over the logo menu item all the time, and I don’t know how to get rid of it.

My site is http://www.processpictures.com

Thanks!

[JoaoModerator]

Hi There,

Please add the following code on your Appereance / Customizer / Custom / CSS

.x-navbar {
    border-bottom: 0;
    box-shadow: 0;
}

#menu-item-7456 a:hover, #menu-item-7456 .x-active > a, #menu-item-7456 .current-menu-item > a {
  box-shadow: none;
}

Hope that helps,

Joao

[processpicturesParticipant]

Hi!
It got rid of the hairline grey outline on the navbar (thank you!), but the hover grey bar on the logo is still there. Just in case I put it in the wrong spot, here’s all the CSS in the Customizer:

.x-navbar {
background-color: #000000;
border-color: #474747;
border-bottom: 0;
box-shadow: 0;
}
.x-navbar .sub-menu {
background-color: #000000;
}
.x-logobar {
background-image: url("http://www.processpictures.com/wp-content/uploads/2015/08/darkdenim3-DARK.png");
background-color: #030303;
border-color: #474747;
}
.x-portfolio .entry-info,.x-portfolio .entry-extra {
    float: none;
    width: 100%;
}
@media (min-width: 980px) {
  .x-logobar { 
    display: none !important; 
    visibility: hidden !important; 
  } 
  .x-navbar .desktop .x-nav > li.logo-menu-item > a { 
    text-indent: -99999px; 
    text-align: left; 
    width: 306px; 
    height: 115px; 
    background: url(http://www.processpictures.com/wp-content/uploads/2016/05/Tree-Nav-Logo.png) no-repeat center center; 
    background-size: contain; 
}
.x-navbar-inner {
overflow: visible;
max-height: 60px;
}

#menu-item-7456 a:hover, #menu-item-7456 .x-active > a, #menu-item-7456 .current-menu-item > a {
  box-shadow: none;
}

Is this correct? I don’t know the first thing about CSS, and am sort of going off what I learn from other people posting here and on the Facebook group. I’m sure it’s obvious in the code I threw together.

[Rue NelModerator]

Hello There,

I have inspected your custom css code. It appears that there is a missing curly brace. Please correct it first.

Please let us know how it goes.

[processpicturesParticipant]

So actually to clarify the original problem, that grey hover bar was there only on the Home page, and only when you weren’t hovering the cursor over the logo menu item. Closing that block doesn’t seem to have fixed it.

Thanks for your continued help with this, since it’s the home page, obviously it’s kinda important. 🙂

[RupokMember]

Hi there,

Would you kindly add a screenshot pointing out the line you are referring? Also you should fix the unclosed curly brace as mentioned on above reply to avoid potential conflict.

Thanks

[processpicturesParticipant]

I did, thank you.

Attached is the screenshots showing the behavior. On the homepage it behaves opposite of what all other menu items do when hovered over, and on all other pages the logo behaves the way I want it to (no grey bar ever).

[JadeModerator]

Hi there,

Please add this CSS:

.home li#menu-item-7456 a {
    box-shadow: none !important;
}

Hope this helps.

[processpicturesParticipant]

Fixed it, thanks!

[Prasant RaiModerator]

You are most welcome. 🙂

[lucascolepetersParticipant]

Hello, I am trying to get rid of the thin gray line that is between my stacked logo and menu. Any CSS for that one? You can view my website at http://www.iamlucascole.com.

[Rue NelModerator]

Hello There,

Thanks for updating this thread!

To get rid of the thin gray line that is between the stacked logo and menu, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.site .x-logobar {
    border: none;
    box-shadow: none;
}

Hope this helps.

[Author]

Posts