[Resolved] How to add a graphic to right of navigation bar

[Elizabeth]

Hi,

I’m beginning work on a new website and would like to create a header where the logo floats to the left of the navigation bar and a second image floats to the right of the navigation bar.

Here’s a link to an image file showing the desired layout https://tiglutik.candyappledev.com/wp-content/uploads/2020/06/Tiglutik-header.jpg.

My guess is that the image of the bird should be added into a section, but I’m not sure how best to do this.

Thanks for your help,
Elizabeth

[Elizabeth]

Just a correction to my initial question. I should have written that my guess is to add this to an Element – not section.

[Leo]

Hi there,

Can you try the header widget area?
https://docs.generatepress.com/article/header-widget/

[Elizabeth]

Hi Leo,

Thank you for getting back to me. I completely forgot about using the header widget and appreciate the reminder.

I’ve added the image to the header widget which gets me closer. The image of the bird is now sitting above the navigation bar and not to the right of it. I apologize if I’m missing something simple, but how can I make this image line up with the right side of the navigation bar?

Elizabeth

[David]

Hi there,

try this CSS:

@media (min-width: 769px) {
    .inside-header {
        display: flex;
        align-items: center;
    }
    .header-widget {
        order: 10;
    }
    .main-navigation {
        margin-left: auto;
        margin-right: auto;
    }
}

It only applies to desktop – if its correct let us know how it should display on mobile.

[Elizabeth]

Thank you, David, this worked! My last question is how to center the navigation bar between the logo and the bird?

[David]

I have edited the CSS here to center the navigation.

[Elizabeth]

Hi David,

I just made this change and the navigation bar is now centered.

@media (min-width: 769px)
.main-navigation {
margin-left: auto;
margin-right: auto;
}

Thanks again for your help!

Elizabeth

[David]

Glad to hear that!

[Elizabeth]

Thank you for the exceptional support and for a fantastic, flexible theme!

[David]

You’re welcome!

[Author]

Posts