Firefox // Chrome Issue

Support
#1

I am trying to recolor the navigation and am running into trouble. It looks as I want in Firefox, but in Chrome the lines of the first Menu Items are missing.

in Chrome, when I deactivate the below CSS, the right border becomes visible

.x-navbar .desktop .x-nav>li:first-child>a {
    border-left: 1px solid rgba(255,255,255,0.1);
}

If however, I deactivate:

.x-navbar .desktop .x-nav>li>a {
    border-right: 1px solid rgba(255,255,255,0.1);
    padding: 0;
}

All right borders disappear… and the left one will show up. Now I wonder if the box may be a pixel too small, so it will either show the left or the right border, but never both. If I increase border sizes, they become visible, but thick and not as “pretty” as if I used 1px top and bottom borders are not white, either in Chrome

Here is a graphic…
Image on Imgur

Here is my CSS Customization:

/* ### Nav Bar ### */

.x-navbar {
	border-top: 1px solid rgba(255,255,255,0.1) !important;
	border-bottom: 1px solid rgba(255,255,255,0.1) !important;
	background: rgba(160,160,192,0.1) !important;
	box-shadow: 2px 2px 2px rgba(16, 16, 16, .2);
}

.sub-menu {
	border-left: 1px solid rgba(255,255,255,0.1);
	border-right: 1px solid rgba(255,255,255,0.1);
	border-bottom: 1px solid rgba(255,255,255,0.1);
	background: url('/wp-content/uploads/sites/2/2017/07/Noisy_BG_lighter.jpg') !important;
}

menu-item>a {
    box-shadow: 0 1px 0 0 rgb(216,15,15) !important;
}

Does anyone have an idea, how to change the Chrome behavior into the Firefox one?

#2

Hi There,

Can you try adding this custom CSS:

.x-navbar .desktop .x-nav {
    border-left: 1px solid rgba(255,255,255,0.1);
}
.x-navbar .desktop .x-nav>li:first-child>a {
   border-right: 1px solid rgba(255,255,255,0.1);
   border-left: 0;
}

Let us know how this goes.

1 Like
#3

Awesome, that worked…
There is still a tiny difference though. On Firefox the top and bottom bar are white and on chrome they are dark… you can see that on the screenshot above aswell…

I tried adding the !important (I am not a programmer, so I do this as first :smiley: ) but it appears only on firefox, see the .x-navbar CSS in the above post.

Thank You :slight_smile:

#4

Actually nevermind… I changed the shadow to blur only 1px and the top and bottom border showed up

.x-navbar {
	border-top: 1px solid rgba(255,255,255,0.1) !important;
	border-bottom: 1px solid rgba(255,255,255,0.1) !important;
	background: rgba(160,160,192,0.1) !important;
	box-shadow: 2px 2px 1px rgba(16, 16, 16, .33);
}

Thank You, you can close this now.

#5

You’re welcome.