[Resolved] Header customization: no “Navigation as Header” option

Home Forums Support Header customization: no “Navigation as Header” option

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1441114
    Vasiliy

    Hello,
    It’s my very first support ticket, so I’d like to use this opportunity to tell you that you folks are amazing. I’m a developer myself and can appreciate what you achieved with this theme (used Avada and some more in the past). Your support is second to none and it’s just a pleasure to read all these topics where you invest time into understanding very specific use cases and providing tailor-made solutions to GP users. At this point, I can wholeheartedly say that GP is the best software package I’ve ever bought.

    Now, to my question.

    That’s my site.

    Currently, the header looks like this.

    I want to make it look like this.

    After reading quite a bit of threads on this forum, looks like the first step towards the desired result is to opt for Navigation as Header. However, for some reason, I don’t see this option in Customization -> Layout -> Header (that’s what I see there). Is there some precondition for this option that I missed?

    In addition, I also found this article which seems to be relevant (since I also want to have “three pieces” header). Do you think it’s worth going down this path?

    In general, if you have any other info or links that might help me, I’ll appreciate if you tell me about that.

    Lastly, I’ve just read Tom’s announcement of GP 3.0 and it looks like the default header in the new version is much closer to what I need. So, I wonder, how hard it will be to achieve the desired result in GP 3.0? I don’t have staging website right now, but I trust you so I don’t mind becoming alpha tester for GP.

    Thanks for your help in advance.

    #1441275
    David
    Staff
    Customer Support

    Hi there,

    first off – thank you for the great feedback – we really do appreciate hearing this!

    The Navigation as Header option will appear if you enable the Menu Plus module in Dashboard > Appearance > GeneratePress.

    By default all GP Premium modules are disabled. So you may find some others in there you want to apply.

    For that layout i would look at using Custom CSS to style the:

    1. the menu Sign up Button – this article explains how:
    https://docs.generatepress.com/article/adding-buttons-navigation/

    2. The alignment would require a little flexbox CSS to arrange the order etc. Once all your menu items are in place – let me know and i can assist with that if you want.

    #1450974
    Vasiliy

    David,
    Thanks a lot for your suggestions. I hacked with CSS for couple of hours and got something pretty decent-looking! I’m almost completely satisfied with the results, except one element that I just can’t figure out how to add: the separator line below the header.
    I tried to do this:

    	
    .inside-navigation {
    	border-bottom: 1px solid #c3c3c3;
    }	
    

    but then the border is full-width.
    Found some answers on SO (like this one), but couldn’t make it work.
    Do you have any suggestion about addition of this bottom border with specific margins on the sides?

    #1451183
    Leo
    Staff
    Customer Support

    If I understand correctly, you need use to use the pseudo selector like :before similar to the method here:
    https://www.steckinsights.com/shorten-length-border-bottom-pure-css/

    #1451253
    Vasiliy

    Leo,
    As far as I understand, the code in the link you attached is pretty much the same as in the StackOverflow answer I linked to.
    If I add this to my CSS:

    
    	.inside-navigation:after {
    		content: ""; /* This is necessary for the pseudo element to work. */ 
        	display: block; /* This will put the pseudo element on its own line. */
        	margin: 0 auto; /* This will center the border. */
        	width: 50%; /* Change this to whatever width you want. */
        	padding-top: 20px; /* This creates some space between the element and the border. */
        	border-bottom: 1px solid black; /* This creates the border. Replace black with whatever color you want. */
    	}	
    

    I get this result, which is, of course, not what I want.

    Replacing inside-navigation with main-navigation doesn’t seem to do anything.

    Can you suggest any other approach?

    #1451633
    Elvin
    Customer Support

    Hi Vasiliy,

    You’re almost there. You can try this code.

    .inside-navigation:after {
        content: "";
        border-bottom: 3px solid red;
        width: 50%;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        visibility: visible !important;
        margin: 0 auto;
    }

    We use absolute positioning for bottom:0 property to work. This is done to make sure it’s on the border is actually at the bottom.

    We then add left:0 and right:0 for the margin: 0 auto; to work.

    I added visibility: visible !important; to force it to be visible.

    content: ""; width: 50%; and border-bottom: 3px solid red; should be pretty straight forward. Change these values to whatever you prefer.

    #1451644
    Vasiliy

    Elvin, thanks for your help. Your note about visibility solved it for me because this was the crux of the issue.

    I ended up using this CSS (just in case anyone will read this topic later):

    
    .main-navigation:after {
        content: ""; 
        margin: 0 auto;
        width: auto;
        margin-left: 40px;
        margin-right: 40px; 
        padding-top: 30px;
        border-bottom: 1px solid #C3C3C3;
        visibility: visible !important;
    }
    

    It’s better than specifying the width in % because this way it scales properly with window size.

    Folks, I once again want to thank you for outstanding support!

    #1451652
    Elvin
    Customer Support

    Oh yeah that works too.

    Your note about visibility solved it for me because this was the crux of the issue.

    Yes we had to do that because there’s a CSS code somewhere in GP that assigned a visibility:hidden property to the .grid-container:after class. It prevented things from being visible.

    It’s better than specifying the width in % because this way it scales properly with window size.

    Indeed, for responsive resize.

    Folks, I once again want to thank you for outstanding support!

    No problem, we’re always glad to be of any help.:)

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