[Resolved] header widgets (left, centre, right)

Home Forums Support header widgets (left, centre, right)

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #343274
    orlando britain

    Hi Tom,
    I want to place 3 widgets in the header. 1 float left (logo), 1 centered (search box) and 1 floating right (opening hours text) as can be seen on our website: http://datastores.co.uk/

    I am currently achieving the desired affect by using 3 DIVs in the ‘Before Header’ GP Hooks Section containing code although I would much prefer to use widgets as they are easier to manage/edit.

    If I place 3 widgets in the header area, I can get them to align (not be on top of each other) by using CSS I found elsewhere on this forum (pasted below) But they are all floated left… How can I get each widget to float in the correct location??

    Many Thanks!

    .header-widget {
    float: left;
    max-width: 100%;
    }

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

    GeneratePress 1.3.48
    #343291
    Roberto Enrique

    Using this plugin you can use widgets instead:
    https://wordpress.org/plugins/widget-shortcode/

    And keep using the “before header” hook like this:

    
    <div class="grid-33 tablet-grid-33">
    [widget id="widget-1"]
    </div>
    <div class="grid-33 tablet-grid-33">
    [widget id="widget-2"]
    </div>
    <div class="grid-33 tablet-grid-33">
    [widget id="widget-3"]
    </div>
    

    And they should collapse automatically as expected.

    If I’m not wrong, every widget should have a unique class applied to them automatically so you can target your contents as you need but if you need more granular control you can also use something like:
    https://wordpress.org/plugins/widget-css-classes/

    #343329
    orlando britain

    Hi Roberto, many thanks for the link.

    I have installed the plugin and set up 3 widget areas and it’s nearly there.

    when I use your code [widget id=”widget-1″] in GP Hooks, it just shows the text – [widget id=”widget-1″].
    If I use the short code – [cwa id=’widget-2′] it does output the Widgets (left, centre. right) as a styled list (bullet points).

    is it just case of using more css to get rid of the bullet points and to be contained within the container not the full page width.
    thanks,
    orlando

    #343441
    Leo
    Staff
    Customer Support

    I think Roberto’s [widget id=”widget-1″] it’s just an example. You would need to grab the actual shortcode from the plugin.

    Not sure what you mean by the bullet points and the container width. Can you link us to your site?

    #343490
    orlando britain

    beside each widget was a bullet point which I removed using this CSS: list-style: none;

    all sorted. thanks 🙂

    #344023
    Leo
    Staff
    Customer Support
    #511799
    Luizik

    You can also use positioning and float:

    
    .site-branding{
        position: absolute;
        left: 0;
        right: 0;
    }
    .header-widget {
        width: 100%;
    	max-width: 100%;
    }
    #custom_html-2{
    	float: left;
    }
    #custom_html-3{
    	float: right;
    }
    
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.