Apply CSS on Pro Header

Support
#1

Hi,

I am trying to use CSS to customize the navbar in Pro’s Header. Such as use background-image to display the logo on the navbar instead of using the image element.
I tried to give the container a class and write my css in the CSS section, but there is nothing happen. Pls advise, thx

#2

Hi There,

Your setup is correct and It is now working when I checked.
Note that when using a background, the element should have content or at least have width and height.

1 Like
#3

thanks for your reply.
Yes I just figured out how to add the background-img.
But now I got stuck on the Navigation Inline text, I want to make the navbar menu text bold when hover it, I gave a class “nav-inline” for the Navigation Inline Element, and add the below CSS, but no luck:

.nav-inline a:hover {
font-weight: bold;
}

#4

Hi There,

Try this CSS instead:

.nav-inline a:hover .x-anchor-text-primary {
  font-weight: bold;
}

Hope this helps.

#5

it doesn’t work either. :cry:

#6

Hi there,

In the Header builder, there is an option for that. Kindly click on the magnifying glass icon of the Navigation inline element and click on the Top Links tab:

Then kindly click on the text tab and you will see the options to change the font characteristics:

Hope it helps.

#7

@christopher.amirian thanks for your help, but this option only style the fonts, it doesn’t style the hover effect.

#8

Hi there,

The color on hover can be changed only using the builder options using the interaction option:

You will need a custom CSS code, which will be a temporary solution for this case and it may break in future releases, so kindly consider this as a customization tip which will not be supported in the future:

Kindly add the code below to Pro > Launch > Theme Options > CSS:

.x-menu > li > .x-anchor[class*="active"] .x-anchor-text-primary {
    font-weight: bold !important;
}

Hope it helps.