Archived topic

Image behind logo floating outside container & menu

7 replies · Started by jasper on January 31, 2018

Viewing posts 1–8 of 8

January 31, 2018 at 4:31 pm #484892

Hello -

I followed the instructions here -
https://docs.generatepress.com/article/navigation-logo/

But I would like to have a background image behind the logo area and nav area (basically including and above the yellow line in the screen shot). Also I would like to move the nav menu down close to the yellow line.

https://pasteboard.co/H5xSnYP.jpg

Also, it behaves differently on the blog pages but only if "display posts in columns" is selected. Otherwise, it behaves like the Page.

https://pasteboard.co/H5xSUlg.jpg

I also tried putting the logo the header, putting the bg image in a page header, and combining the header with navigation, but that didn't quite do the trick either because it didn't put the header behind the nav. I would be happy to go back to doing it that way if this is better.

Your help docs are great but could not quite find the thing.

I need to get you a login for the site as it's in privacy mode - I will send this via email to Support@GeneratePress.com.

Thank you!

January 31, 2018 at 11:20 pm #485087

Hi there,

You could try this:

.main-navigation {
    position: relative;
}

@media (min-width: 769px) {
    .main-navigation {
        padding-bottom: 100px;
    }
}

Let me know :)

February 5, 2018 at 3:40 pm #488922

Hello,

Thanks for that information. I have sent a new login for the site to support@ because I have this on a different
server.

I decided to do this a different way because I wanted to take advantage of the awesome page headers.

All I want to do is move the menu bar down without adding padding to the rest of the header. Hope that makes sense.

Thanks!

February 5, 2018 at 8:38 pm #489078

Try changing your navigation logo to float right.

Then add this CSS:

@media (min-width: 769px) {
    #site-navigation {
        margin-top: 100px;
    }
}

Let me know :)

February 6, 2018 at 5:25 am #489334

Actually I am not using the nav logo, I am using the header, so that CSS only pushed everything down.
https://pasteboard.co/H6o6G9k.jpg

Here are header settings -
https://pasteboard.co/H6o8E7g.jpg

I thought using headers had some advantages and didn't have any luck with the nav logo method but I am open to suggestions. I just want the nav bar to be lower and then remain at 60px when scrolling down.

Thanks!

February 6, 2018 at 9:14 am #489623

Right - sorry! I meant to say set your navigation location to float right (not the logo): https://docs.generatepress.com/article/navigation-location/

That will make it inline with your logo, so pushing it down won't create extra space.

February 6, 2018 at 2:19 pm #489883

Hello,
Thanks. I think there was a misunderstanding in that the logo was part of my page header, but I removed that and set the site logo instead. Added the code and styling you suggested above. Now it all works, finally. Don't know why that was so hard for!
Thanks!

February 6, 2018 at 9:16 pm #490080

You're welcome! :)

This archived topic is closed to new replies.

Start building better websites today.