How to have menu background always with transparent color


#1

Hi

I scanned forums but I didn’t found or I overseen if anyone already asked how to have menu background always with transparent color.

What I would like is when page is fully loaded and header slider activated I would like to have some kind of transparent color under menu at all times not only when page is scrolled.
Is it possible to achieve this?


#2

Hi,

Sure, you can use a custom CSS plugin or child theme and add this:


.site-header {
   background-color: rgba(0,0,0,0.5);
}


#3

Thank You! That was fast reply!

I’m also having a small issue with characters encoding. In Croatian language specif Slavic letters appear bigger size than rest of the text. I did not change encoding and based on stylesheet its UTF-8.

Any idea how I could get all letters in same size?


#4

You should probably switch to a different font that supports latin-extended. Check the documentation page to see how to switch fonts.


#5

ok excellent thank you


#6

UPDATE. In case someone have same problem so it can use this quick fix.

Checking fonts I found out this:
Default body font is Source Sans Pro and should be showing extended Latin characters as they are included in that font
Default header font is Raleway and doesn’t have extended Latin characters so its using different font to produce missing letter thus the differences in sizes.

Solution to this was easy I done this:
In customizer under font sub-menu, in body font options the default Font name/style/sets was:
Source+Sans+Pro:400,400italic,600
changed it to:
Source+Sans+Pro:400,600,400italic&subset=latin-ext,latin

For header fonts always under font sub-menu, in Heading fonts options
Font name/style/sets
Raleway:400,500,600
changed to:
Source+Sans+Pro:400,500,600,400italic&subset=latin-ext,latin
Font family
’Raleway’, sans-serif
changed to:
‘Source Sans Pro’, sans-serif

To easily check if the font you want to use have extended characters check this link