How do I get away from the gray part of an active page

[sbertschinger 0]

After hours of trying and searching through the forum, I have to ask here:

How do I get away from the gray part of an active page?

Here my CSS code:

#navbar {

float: left;

width:100% !important;

position: relative;

}

#navbar ul {

clear: left;

float: left;

list-style: none;

margin: 0;

padding:0;

position: relative;

left: 50%;

text-align: center;

width: auto !important;

}

#navbar ul li {

display: block;

float: left;

list-style: none;

margin: 0;

padding: 0;

position: relative;

right: 50%;

}

.navbar {

background: url(http://blog201301.hostpoint.ch/bg.png) !important;

background-repeat: no-repeat !important;

box-shadow: none;

float: none !important;

}

.navbar.navbar-content-width {

border-radius: 0px 0px 0px 0px;

}

.navbar.pl-color-black-trans {

background-color: none;

border-top: none;

}

.navbar .navline > li > a {

font-family: Abel;

color: #0091CB;

font-size: 17px;

text-transform: lowercase;

display: block;

float: center;

padding: 10px 15px 10px 15px;

text-decoration: none;

}

.navbar .navline > li > a:hover, a:active {

text-decoration: none;

color: #000000;

padding: 10px 15px 10px 15px;

}

If a page is active it should be without this grey part and the font should be black. Any help? Thanks!!

[Danny+ 1,327]

Hi,

Can you provide a link to the site in question please or a screenshot of the issue.

[sbertschinger 0]

Sorry, here we go:

http://www.hostpoint.ch/ms/welcome/grey.jpg

http://www.hostpoint.ch/ms/welcome/grey2.jpg

[Danny+ 1,327]

OK, what you can do is use the :active pseudo class and then apply apply background-color: transparent to it.

If you can provide a link, or tell us which Navigation section you're using for you menu, we will be able to assist further.

[sbertschinger 0]

Here is the link: https://blog201301.hostpoint.ch/about/

Using: NavBar

Thanks for help.

[sbertschinger 0]

I was checking with Firebug. In my opinion i should tell the following class to be white with black font color:

.menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-15 current_page_item menu-item-223 {

backgorund-color:#FFFFFF;

color: #000000;

}

But its not working. I suppose I think because troubleshooting too complicated....

[catrina 103]

Your selector is in correct. Are you trying to change the individual menu item?

[sbertschinger 0]

Actually I just want to change the menu so that when a page in the menu above is active (choosen), this gray part is off (or transparant) and the font is black.

Sorry after hours searching the error i am getting lost :-)

[catrina 103]

You'll need to use a selector like this:

.current-menu-item .current_page_item {

backgorund-color:#FFFFFF;

color: #000000;

} 

It'll require adjustments and playing around if it doesn't work the first time.