[Resolved] Header Widget Positioning

Home Forums Support [Resolved] Header Widget Positioning

Home Forums Support Header Widget Positioning

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #224283
    Andy

    Hi Tom,
    When using the Float Right option for the Primary Nav position I would like the header widget to sit below the primary nav, is their a hook to achieve this or would it need custom CSS?

    Cheers,

    Andy

    #224342
    Tom
    Lead Developer
    Lead Developer

    Hi Andy,

    Hmm, you could try something like this:

    .inside-header {
    	display: -webkit-box;
    	display: -moz-box;
    	display: -ms-flexbox;
    	display: -webkit-flex;
    	display: flex;
    	-webkit-flex-flow: row wrap;
    	flex-flow: row wrap;
    }
        
    .header-widget {
    	-webkit-box-ordinal-group: 5;  
    	-moz-box-ordinal-group: 5;     
    	-ms-flex-order: 5;     
    	-webkit-order: 5;  
    	order: 5;
    }
    	
    .main-navigation {
    	-webkit-box-ordinal-group: 4;  
    	-moz-box-ordinal-group: 4;     
    	-ms-flex-order: 4;     
    	-webkit-order: 4;  
    	order: 4;
    }
    #224466
    Andy

    Thanks, almost there, but Nav is central instead of below widget:

    URL: http://tinyurl.com/zrtj257

    #224513
    Tom
    Lead Developer
    Lead Developer

    Hmm ok, scrap that idea.

    Edit the generate_header_items() function and remove the header widget function: https://gist.github.com/generatepress/4cfa628cec96088dcbf8dd8cf399b83e

    Then add the function into GP Hooks in the “After Header Content” area:

    <?php generate_construct_header_widget(); ?>

    #224625
    Andy

    Thanks it worked after I added a clear to the widget but in the end decided it looked too busy/cramped with Nav, Cart and Search bar all in the same place, so went back to nav below header.

    Sorry to have wasted your valuable time Tom.

    #224688
    Tom
    Lead Developer
    Lead Developer

    No waste, I’m sure this topic will help someone ๐Ÿ™‚

    #982291
    Tyler

    This is actually what I try to achieve all the time!

    I wish there was an easier way to do this request: header widget to appear after nav menu (float right).

    I’ve done this trick and it works, but is there a way to have this widget inside the header area?

    Selecting after_header blows it out. See picture on what I am trying to achieve.

    View post on imgur.com

    https://elbertcountyagalliance.org

    #982486
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    What if you add this CSS?:

    .site-logo {
        float: left;
    }
    #983074
    Tyler

    Thanks Tom!

    #983203
    Tom
    Lead Developer
    Lead Developer

    You’re welcome ๐Ÿ™‚

    #1392355
    Mikko

    This one worked for me

    .inside-header {
    display: flex;
    flex-direction: column-reverse;
    }

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