[Support request] Transparent menu on desktop and background on tablet/mobile

Home Forums Support Transparent menu on desktop and background on tablet/mobile

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #319879
    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
    #320063
    Tom
    Lead Developer
    Lead Developer

    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?

    #321860
    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!!

    #321990
    Tom
    Lead Developer
    Lead Developer

    You can target tablets and mobile like this:

    @media (max-width:1024px) {
        /* tablet CSS in here */
    }
    
    @media (max-width: 768px) {
        /* mobile CSS in here */
    }
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.