transparent header

Home Forums All Other Themes transparent header

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #135851
    Nicolas Glättli
    Participant
    • Topics: 2
    • Replies: 5
    • Total: 7
    Member since: November 7, 2019

    Hello Team
    I purchased the complete pro theme and set different header images on all pages (only worked by set a “headercode with <img src=…”)
    My site is https://www.ngsystems.ch
    I set the option transparent header on the homepage.

    What do I have to add to the custom CSS that all pages have a transparent header/Menu bar?

    And is there a code that the top menu bar and the menu bar (with logo and menus) stay on top while scrolling the webpage?

    Many thanks.

    Nicolas

    #136409
    Nicolas Glättli
    Participant
    • Topics: 2
    • Replies: 5
    • Total: 7
    Member since: November 7, 2019

    and on the smartphone the mobile menu links have an annoying offset! I have to fingertip a little bit above the links to open the right pages?

    How do I solve this problem?

    Thanks.

    Nicolas

    #137055
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 23457
    • Total: 23457
    Member since: August 16, 2013

    Hi,

    Kindly go to Appearance >> Customize >> Basic >> Scroll down to find Custom CSS and paste there:

    .page .header, .single .header, .archive .header, .search .header { background-color:transparent !important; position:absolute !important;}

    Regards,
    Dave

    #139467
    Nicolas Glättli
    Participant
    • Topics: 2
    • Replies: 5
    • Total: 7
    Member since: November 7, 2019

    Hi Dave

    on the computer the menu now works as asked. But on the smartphone the background color of the “logo bar” is now transparent/white, but only on the inner pages and not on the home page?!

    and how do I resolve the offset of the links in the menu bar on the smartphone (ex. when I click on the second menu link, it opens the third) ?

    Many thanks.

    Nicolas

    #139468
    Nicolas Glättli
    Participant
    • Topics: 2
    • Replies: 5
    • Total: 7
    Member since: November 7, 2019

    Hi Dave

    the offset problem was because of my big fingers and the small buttons…;-)

    can you give me a workaround for the newly appearing wrong background color (transparent/white) on the smartphone behind the logo on the inner pages? (on the home page it’s the right color dark green?!)

    Many thanks!

    Nicolas

    #139491
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 23457
    • Total: 23457
    Member since: August 16, 2013

    Hi,

    Kindly use this one:

    @media screen and (max-width:479px) {
    .page .header, .single .header, .archive .header, .search .header { background-color:#383939 !important;}
    }

    Regards,
    Dave

    #139558
    Nicolas Glättli
    Participant
    • Topics: 2
    • Replies: 5
    • Total: 7
    Member since: November 7, 2019

    Hi Dave
    I succeeded by adding in css first your solution with transparent until 47.938em and then your solution with color #383939 apart 48em!
    I have this numbers from the theme-responsive.css file from the theme.

    Many thanks.

    Nicolas

    #139595
    Forum Moderator
    Participant
    • Topics: 0
    • Replies: 23457
    • Total: 23457
    Member since: August 16, 2013

    Hi,

    Kindly use this

    @media screen and (min-width:480px) and (max-width:767px) {
    .page .header, .single .header, .archive .header, .search .header { background-color:#383939 !important;}
    }

    Regards,
    Dave

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.