Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #406920

    Hello,

    I want to header to be visible 100 percent and remove any form of transparency (logo and menu area).

    When a visitor scrolls on the website, I want the main area to dissapear under the header and not be visible anymore. Not even a bit

    How can I achieve this?

    Greetings,

    Peter

    #406936

    Hi PeterTLH ;
    #1 “I want to header to be visible 100 percent”
    While creating “your page” you can chose “Header visibility and transparency”.

    #2 “I want the main area to dissapear”
    Go to Theme settings > Header

    Here is an image http://i.imgur.com/TLEgh2p.jpg

    #406950

    Hello,

    thanks for your reply.

    On my pages I have set the header visibility and transparency to “No transparency”. So that setting is ok.

    Still when I scroll I see a little of the page content through the menu and logo area.

    #407199

    Hi!

    Please add following code to Quick CSS in Enfold theme options under General Styling tab

    #header.header-scrolled { background-color: white; }

    You can change “white” into the background color of your header

    @begrafiks
    thanks! :)

    Regards,
    Yigit

    #407262

    Hello,

    used that piece of code in Quick CSS but I still see the main page content under the menu and logo when I scroll :(

    Greetings,

    Peter

    #407514

    Hey!

    Can you post the link to your website please?

    Regards,
    Yigit

    #408761

    Hello Yigit,

    that is not possible because I am designing the website on our local NAS.

    Can I provide you with some sort of code / information / printscreens?

    Greetings,

    Peter

    #408767

    Hey!

    Sure, please post a screenshot of the header when its scrolled down. You can upload your screenshots on imgur.com or Dropbox public folder and post the links here

    Regards,
    Yigit

    #408774

    Hello,

    here is a link with 2 printscreens: 1 not scrolling at all and one scrolled.

    https://www.dropbox.com/sh/jfnlgbdjmm6xgp1/AADESIj54e49Mk-AL2DYwobba?dl=0

    Greetings,

    Peter

    #408785

    Hi!

    Please try using following code

    header#header {
      background: white;
    }

    Cheers!
    Yigit

    #408791

    Thanks. That did the trick. The code I tried before “#header.header-scrolled { background-color: white; }” did not work. The last code did!

    Greetings,

    Peter

    #408793

    Hi!

    For future readers, previous code would work if you enabled shrinking header option in Enfold theme options > Header > Header Behaviour.
    You are welcome, glad we could help! Let us know if you have any other questions or issues :)

    Cheers!
    Yigit

Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘How to change header to non transparent?’ is closed to new replies.