[Resolved] Header Widget

[ZEMDER]

Hi Tom,

Recently I bought GP Premium in order to build my website. I have added an html (div) widget to the header where I have a Logo and the menu floating to the right side. I need to align my widget next to the logo but I can’t do it.

I’m trying to use <div style="float:left">My Content</div>, but this does not work because the div is shown always to the right above the menu.

Do you have some suggestion to solve this ..? Would be possible to have by default several widgets in the header equal like the footer for some future release of GP ..?

Thanks

[Leo]

Hi Elvis,

If I understand what you are after, this post might help: https://generatepress.com/forums/topic/header-widget-to-right-of-logo/#post-151444

Let us know.

[ZEMDER]

Hi Leo,

Thanks for your reply. The thread is useful but I still can’t get my goal. I have tried with this:

1. I have added the function https://gist.github.com/generatepress/eca14d26e64d77d07384 to the file functions.php of GP theme

2.I have added the code .site-branding,.header-widget {float: none; display: inline-block;} but changing the code by this:

.site-branding,
.header-widget {float: left; display: inline-block; margin-top: 12px;}

* Finally I got place the widget to the left side of the logo, but I need place it on the right side of the logo.

If I use the css code margin-left: 50px; for example, the widget push the logo to the right 50px, but the widget does not move to the right of the Logo.

I don’t understand why the header section does not have the same footer design with several widgets.

Leo, is there a way to put my widget (contact & info data) to the right of the logo ..?

Thanks for your support.

[Leo]

Just want to double check that you are wanting your header widget to show up right next to your logo (which is on the left) instead of all the way on the right?

Is your site live by any chance?

[ZEMDER]

Hi Leo,

At this time I’m working in localhost mode before to upload the site in production. Perhaps can I send to your email the screenshot with the widget placed on the left side of the logo?

[Leo]

Yup for sure – Either upload the screenshot to a hosting site (https://postimage.org/) and post the link here or send it to support@generatepress.com

[Tom]

It should actually be much easier than that.

Remove the function completely.

Then add this CSS:

.header-widget {
    float: none;
    display: inline-block;
}

.site-logo,
.site-branding {
    float: left;
}

[ZEMDER]

Leo, Tom,

Thank you so much for your support, the css code suggested works perfect ! now I have got what I want. I have created on the header, a widget with this code:

<div style="margin-left:20px;font-size:14px;margin-top:15px;font-family: 'Fjalla One';"><span>CONTACT & INFO</span><br/><span>US (305) 3206285</span></div>

The widget is shown on the right side of the Logo without problem !

[Leo]

Glad we can help!

[Author]

Posts