[Resolved] How to move text widget below the Search bar widget in the Header?

Home Forums Support [Resolved] How to move text widget below the Search bar widget in the Header?

Home Forums Support How to move text widget below the Search bar widget in the Header?

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #2142474
    bluebit

    I have currently two widgets in the header widget area, a search bar widget and a text widget. I would like to move the text widget below the search bar in the header, how do I do this with css?

    My current Custom CSS code:

    .inside-header {
    position: relative;
    }

    .header-widget {
    position: absolute;
    bottom: 37px;
    left: 15%;
    }

    .site-header input[type=”search”] {
    box-sizing: content-box;
    width: 710px;
    }

    .header-widget .widget {
    display: inline-block;
    vertical-align: top;
    }

    #2142510
    Leo
    Staff
    Customer Support

    Hi there,

    I think the easiest option should be to add a search and paragraph block with a block element hook:
    https://wordpress.org/support/article/search-block/
    https://docs.generatepress.com/article/block-element-hook/

    The after_header hook should work.

    Let me know 🙂

    #2142520
    bluebit

    I feel more comfortable with using WordPress without blocks, what´s the css code to move the second header widget below the first?

    #2142531
    Leo
    Staff
    Customer Support

    The current structure is just incorrect and difficult to configure – header widgets designed to be on the right of the logo/menu and not below.

    You can also use a hook element with and call the search field using this:
    <?php get_search_form(); ?>

    #2142548
    bluebit

    Alright, check out my site now, I managed to hook a text widget below the header, now the sides of the widget need to be contained, how to do this?

    #2142553
    Leo
    Staff
    Customer Support

    Hmm since you are using a page builder, I’d assume it has an option that lets you set the width?

    #2142563
    bluebit

    Yea, page builder lets you use add CSS classes, but I don´t know how to use it. Also I tried to make it fit see site again but when its responsive the sides dont stick to the header or body, is there a way to say max width 1200px?

    #2142575
    bluebit

    I found in a section where i can put in CSS declarations and I put:

    max-width: 1200px

    now I have to center it.

    #2142840
    Leo
    Staff
    Customer Support

    So is it all working now?

    I cannot provide support for page builders as I’ve never used them before.

    #2142878
    bluebit

    yep, i found another way to get it to work 🙂

    #2143664
    Leo
    Staff
    Customer Support
Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.