Opacity and height of the headers

  • Author
    Posts
  • #161415

    nestorvr18
    Member

    Hi Taras,

    I’m trying to change the opacity of the following page: https://nestorvr.com/servicios/

    So, I’ve tried the following CSS code:

    .page-id-92 .singular-page-header .has-background-cover .overlay {
    opacity: 0;
    }

    What I am doing wrong? It is only this page where I would like to change the opacity of the header.

    Also, I would like to ask if it’s possible to change the heights of the headers.

    Thank you!

    The blog I need help with is nestorvr.com.

    #161436

    tarasdashkevych
    Theme Author

    Hello Nestor,

    “What I am doing wrong? It is only this page where I would like to change the opacity of the header.”
    – You should remove space between .singular-page-header and .has-background-cover. Try this:

    
    .page-id-92 .singular-page-header.has-background-cover .overlay {
      opacity: 0;
    }
    

    “Also, I would like to ask if it’s possible to change the heights of the headers.”
    – To change it globally, please use this custom CSS:

    
    .singular-page-header {
      height: 20em;
    }
    

    Let me know if you have any additional questions.

    Kind regards,
    Taras

    #161531

    nestorvr18
    Member

    Hi Taras,

    Thank you for the solutions.
    Is it possible to only change the heights of the headers in the mobile version?
    I would like the headers to be smaller just when the user is on the mobile view.

    Thank you!

    Kind regards

    #161546

    tarasdashkevych
    Theme Author

    Hello Nestor,

    Sure. Please use this custom CSS instead:

    
    @media (max-width: 500px) {
      .singular-page-header {
        height: 13em;
      }
    }
    

    Let me know if you have any additional questions.

    Kind regards,
    Taras

The topic ‘Opacity and height of the headers’ is closed to new replies.