🎉 Happy 4th of July! Get 15% off GP Premium with the discount code: 4THOFJULY2020

[Resolved] 2nd color in header

Home Forums Support 2nd color in header

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #1125405
    Torsten

    Hi,
    1) I’m trying to add inside the header on the very right an extra yellow vertical bar with #fece42 – approx. 10px wide and the height of the header.
    I’ve been trying to work with the following

    .inside-header {
        padding: 0 50px; 
    }

    adding padding-right 10px #fece42 in different ways and no success.

    2) I tried as well to have the header fixed above the UberMenu when scrolling.
    If using “navigation as header” and “sticky navigation” with Logo, the header is hidden behind the Ubermenu.
    Any code to keep the header in place?

    Thanks for helping,
    best,
    Torsten

    #1125523
    David
    Staff
    Customer Support

    Hi there,

    1. This will require different CSS if we fix #2. So lets deal with that first.

    2. Can you set the Navigation as Header and remove the sticky nav on the uber menu – i can then provide CSS for both 1 and 2.

    #1125534
    Torsten

    Hi David,
    I made the requested changes…
    😉

    #1125551
    David
    Staff
    Customer Support

    Try this CSS:

    .main-navigation,
    .secondary-navigation {
        position: sticky;
        position: -webkit-sticky;
    }
    .main-navigation {
        border-right: 10px solid #fece42;
        top: 0;
    }
    .secondary-navigation {
        top: 80px; /* Height of primary navigation */
        z-index: 100;
    }
    #1125558
    Torsten

    Hi David,
    excellent for the yellow bar.
    For the sticky menu and header I get an error:
    >>Expected (static | relative | absolute | fixed) but found ‘sticky’.<<
    the header moves partly, please see yourself on the site.

    #1125853
    David
    Staff
    Customer Support

    You can ignore the warning provided its a supported CSS property that WP doesn’t recognise.

    I edited the code here to fix the z-index issue

    #1126055
    Torsten

    lovely…
    but still the header height narrows when scrolling down.
    I’m awaiting a bigger logo file from the designer to replace it.
    Will that solve the problem of narrowing the header when scrollin down?
    Take your time, I might not be able to work on this project tomorrow…
    best,
    Torsten

    #1126249
    David
    Staff
    Customer Support

    Sorry not seeing the ‘narrowing’ is this on any particular browser or device?

    #1126429
    Torsten

    this effect stopped after I changed the logo last night, after posting my comment, into a bigger size.
    Did I mention that your support is the best I know?!
    THANK YOU!

    #1126435
    Torsten

    this is happening in Chrome when I’m logged in as admin.
    fine with me.

    #1126511
    David
    Staff
    Customer Support

    Thanks for the kind words
    So is this all resolved ? 🙂

    #1126621
    Torsten

    yes, I already marked the topic as resolved…
    best,
    Torsten

    #1126669
    David
    Staff
    Customer Support

    Awesome – glad to hear that 🙂

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