Logo floating left of header+navigation+top bar

[Reed]

Hello,

I have attached an image of my current header setup. I am currently using the dispatch imported site.

frugal flyer header

I would like to make my logo larger, and have to to the left, vertically centered beside all header content (primary navigation and the top bar).

More similar to how this site is layed out: https://thepointsguy.com/

Is there an easy way to do this?

[Tom]

Hi there,

Just to confirm, are you wanting the top bar to be next to your logo as well as the navigation?

Your link doesn’t seem to be loading the site – can you double-check?

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Reed]

That is correct.
It is in maintenance mode. I have submitted a link to temp login using the contact form.
Thanks,
Reed

[Tom]

Hmm, you might be better off ditching the “Navigation as Header” option, then setting the Navigation Location to “Float Right”. Then you can add the social icons to the “Header” widget area.

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Reed]

About the same – the logo is in line with the navigation, not vertically centered by the entire header height.

View post on imgur.com

[David]

Hi there,

can you remove the social Icons from the Top Bar and place them in the Header Widget.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Reed]

Yes. Still not aligned unfortunately.

capturefeb28

[Tom]

Hi there,

Try adding this CSS:

@media (min-width: 769px) {
    .site-logo {
        float: left;
        margin-top: 25px;
    }

    .nav-float-right .header-widget {
        top: 0;
        margin-top: 15px;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Reed]

Perfect this worked!
Thank you.

[Tom]

You’re welcome 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts