Transparent menu on desktop and background on tablet/mobile

[Mj]

Hello!

I am working on my first web [http://carlacasals.com] and although I am very happy with Generate Press I have some problems that I can’t solve by myself.

1. On main page, on desktop version, I want the menu to be transparent (as it is now), but in the tablet and mobile version the menu covers the image and we can not read the menu options.
Would it be possible to keep the menu transparent for the desktop version but have a colour background for the tablet / mobile version?

2. In the blog, how can I put space on the sides without affecting the header? I have tried with this css…

.blog{
margin-left:30px;
margin-right:30px;

}

… but it does add margin to the header as well.

Thanks so much!

GeneratePress 1.3.46

[Tom]

If you set the color in “Customize > Colors > Primary Navigation”, then you can set the menu to be transparent on the specific pages: https://docs.generatepress.com/article/merging-the-page-header-site-header/

That way your menu will use the color you set on mobile.

Which section are you wanting to add padding to? Everything but the top area?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Mj]

Hi!

Problem solved with the menu color. Thanks for your solution!

About the padding on Blog page, I managed to configure the padding I wanted, but it’s just ok on desktop version.
The problem is that tablet version and mobile version also adopt the padding set for the desktop version, and it’s a total mess. I used this css:

.blog .site-content{
padding-right: 80px;
padding-left: 80px;
padding-top:50px;
}

Could you help me please with the code to get a responsive blog page??

Thank you!!

[Tom]

You can target tablets and mobile like this:

@media (max-width:1024px) {
    /* tablet CSS in here */
}

@media (max-width: 768px) {
    /* mobile CSS in here */
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts