Header styling with CSS

Support
#1

Hello,

As far as I understand, the X theme does not allow to edit header with Cornerstone so styling to be made with CSS codes, eg:

.x-navbar {
background-color: white;
}

I was not aware of this and not quite happy. Now, how to add then the following:

  1. 10% transparency
  2. Text color
  3. Change font
  4. Change font size
  5. Disable auto transforming to upper case
  6. Adjust the height of the header section
  7. Decrease the height of the header for small screens.
#2

Hello @Osas,

Thanks for writing in!

With X theme, you cannot edit the header. This is also why we have released Pro theme which features the Header and Footer Builder allowing the user to create a custom header or footer for the site.

In X theme, you can tweak the header in X > Theme Options > Header. You can change the Links - Text color and adjust the height of the header or change the font and font size of the menu items.

In other stacks, you can change the background color of the navbar in X > Theme Options > {Stack}. But if you are using Integrity, you will have to change it by way of custom css. Please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.x-navbar {
    background-color: rgba(255,255,255,0.1);
    box-shadow: none;
    border: none;
}

If you are not familiar with rgba color notation, please check this our:

Hope this helps.

#3

Many thanks!

Yes, this has helped indeed. Just two more questions:

  • I would like to add a little transparency (ca. 10%) to the header section. How can I do this with CSS? Or are there some possiblilities to do this through header or stack options?

  • I would like to decrease the height of the header for small screens. How can I do this with CSS or maybe it is possible to do this in options?

Many thanks in advance for your kind support!

#4

Hello @Osas,

It seems that you already have the code:

.x-navbar {
    background-color: rgba(255,255,255,0.1);
    border: none;
    webkit-box-shadow: 0px 3px 5px rgba(100,100,100,0.49);
    moz-box-shadow: 0px 3px 5px rgba(100,100,100,0.49);
    box-shadow: 0px 3px 5px rgba(100,100,100,0.49);
}

So you just have to update background-color: rgba(255,255,255,0.1); to background-color: rgba(255,255,255,0.5);

Notice that 0.1 was updated to 0.5. Feel free to change the value.

Please add this code in the Global CSS:

@media (max-width: 767px) {
    .x-navbar-inner {
        min-height: 40px;
    }
}

Here are some related links for further reading:

Hope this helps.

#5

Many thanks for the expalanation! Just the last question to the topc: If the header becomes smaller, I have also to make smaller all the contents of the header, too (logo, ubermenu icon). Is there a chance to do this in a single CSS?

#6

Hello @Osas,

If you want to adjust the header elements in smaller screens, you will need to update your css code into this:



@media (max-width: 767px) {
  .x-navbar-inner {
    min-height: 40px;
  }

  .x-brand.text {
    font-size: 18px;
  }
}

The ubermenu icon can be adjusted in the UberMenu settings in Apperance > UberMenu > .

Please let us know how it goes.

#7

Great! Many thanks!

#8

You are most welcome!

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.