Archived topic

Header menu - how to make it transparent ?

5 replies · Started by johan on January 2, 2017

Viewing posts 1–6 of 6

January 2, 2017 at 5:42 am #259828

I am sorry Tom, I am sure that you have answered this question before. I read some of the posts and tried myself, but i know shit about CSS or any type of coding (thats why i love generatepress :)

I have setup a site on http://www.geek.se
As you can see in the header, i have a background image. However, the menu buttons have a black box around them. How do i make it transparent?

Also, in the bottom where it says "om rogue" and "boka bord", i have the same background image as in the header, but they look different. Because they are zoomed in for some weird reason?

this is how the image should look like:
http://www.geek.se/wp-content/uploads/2017/01/rouge-bg-2.jpg

here is how it looks zoomed in on the site:
http://www.geek.se/wp-content/uploads/2017/01/Screen-Shot-2017-01-02-at-2.41.34-PM.png

thanks :)
and yes help me out and ill get you coffee, for you and your wife and your kid, happy new year :)

January 2, 2017 at 9:34 am #259901

Hi Johan,

To make the navigation transparent, head to Customizer > Colors > Primary Navigation > Background and delete the hex value in there.

Not quite sure about why the background image is zoomed in. Tom will take a look at it :)

January 2, 2017 at 10:14 am #259917

cheers, it worked thanks Leo!

Now, only the zoom in problem :)

January 2, 2017 at 10:57 am #259949

Hmm, it looks like you're using two different images for the sections and the header.

Header: http://www.geek.se/wp-content/uploads/2017/01/rouge-bg-5.png
Sections: http://www.geek.se/wp-content/uploads/2016/12/rouge-bg-logo.jpg

If you click on the image used in Sections, it will zoom into the real size of the image and you'll see the squares are quite a bit bigger. You'll need to adjust the image so the full size of it has the same square size as the header.

Let me know if that helps or not :)

January 5, 2017 at 2:40 am #260859

But what if I want a rgba, so not completely transparent, background and navigation?

January 5, 2017 at 8:26 am #260936

Hi Helen,

For now use this CSS:

.main-navigation .main-nav ul li a {
   background-color: rgba( 0, 0, 0, 0.5 );
}

Adding CSS: https://docs.generatepress.com/article/adding-css/
This feature will be in the next update though :)

This archived topic is closed to new replies.

Start building better websites today.