Help with header formatting

Hi,

For 1 & 2:

We should be able to replicate this with custom CSS.

But before we start, can you set your Layout > Header's "Header Preset" back to Current? So the nav bar goes back as a child of the Header. We'll just deal w/ the layout using width and flexbox properties.

For 3:

Try adding it in on the Header Widget Area. We'll deal with it with CSS along with the other child elements within the <header>.

Thanks for your help Elvin,

For 1&2:
I have set the Layout > Header, back to current.

For 3:
I made a Top Bar Widget and have aligned it to the top right.

For 1&2:
I have set the Layout > Header, back to current.

Sorry, My bad. I meant "Default". Its so the <nav> element gets inserted back to the <header> as the site logo's siblings. We need this to properly align them with flexbox.

For 3:
I made a Top Bar Widget and have aligned it to the top right.

Can you place the social media links in the Header Widget Area instead? It's so we could place everything within the <header>

Let us know once these are implemented. So we could check the site again and provide the CSS. :D

Ha - made those changes. Sorry my technical skills are limited and didn't understand what you meant by the header widget area. All done.

I didn't want to further create a mess of css, so I left the media links the way they appeared - vertically stacked on top of each other.

Thanks for all your help

Thank you.:)

For #1(and #3?):

Add this CSS:

@media(min-width:769px){
.site-logo {
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
}

.inside-header.grid-container {
    flex-wrap: wrap;
    justify-content: center;
    position: relative;
}

.nav-float-right #site-navigation {
    margin-left: unset;
}

.header-widget {
    order: -1;
    position: absolute;
    right: 0;
    margin-left:20px;
}

.header-widget ul#menu-social-icons {
    display: flex;
}

nav#site-navigation {
    margin-top: 20px;
}
}

Here's how to add CSS: https://docs.generatepress.com/article/adding-css/

This is how it would look like: https://share.getcloudapp.com/NQuKpB7Y

For #2:

Does the social media icons have to be visible? How do you want it to be laid out?

It's pretty tricky to include as there may not be enough horizontal space left if you want them displayed. Let us know. :)

Thank you! This is very helpful!

Thank you! This is very helpful!

No problem. We're not done yet though. We have to fix the mobile view as well.

That said, can you specify how you want the mobile view to be laid out?

Does the social media icons have to be visible?

As mentioned previously, It’s pretty tricky to include as there may not be enough horizontal space left if you want them displayed.

Thanks, didn't realize you were going to keep walking me through this!

So...my thought was that the social media icons could be kept in the upper right hand corner - like very high up. I made a VERY rough sketch on paint, but I think you'll get the idea. The icons would be able to stay in that upper right corner even in the desktop version. The black circle would be where the search button would go.

I don't even know if it's possible, but that was my thought. The logo image can be scaled way down in mobile too.

https://imgur.com/a/rvsEMSa - if that img function doesn't work

Hi there,

you can add this CSS to position the social icons above the logo / nav on mobile:

@media(max-width: 768px) {
    .site-header .header-widget {
        order: -1;
        margin-top: 0;
        padding-top: 0.5em;
    }
    #menu-social-icons {
        display: flex;
        justify-content: flex-end;
        margin: 0 10px 10px 0;
    }
}

What does the circle icon do ?

Thank you for your help!

I essentially want my header to have a similar layout to thespruce.com except with the social icons in the top right corner. The circle is supposed to represent a search feature that I have not enabled yet because I don't know how to position it as such.

1) Social icons: thanks for that mobile css, they are where they should be except, I hope to have them in the same location in desktop view as well.
2) Navigation: for mobile, preferably the menu button will be on the left side of the header logo image with the header logo image centered
3) Search: I don't even know what is the best way I should enable this.

Thanks again!

First off enable the Navigation Search in Customizer > Layout > Primary Navigation.
Once thats in place i can look at the CSS for positioning all the elements.

Okay, done!

You could try to add the css below for goal NO.1 and NO.2.

.header-widget {
    top: 5px;
}

@media (min-width: 768px) {
    button.menu-toggle {
        position: absolute;
        left: 10px;
    }
    .navigation-branding, .site-logo.mobile-header-logo {
        position: absolute;
        left: 50%;
        transform: translatex(-50%);
    }
}

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

For the search bar, if you'd like it locate beside the logo, it's better to add this php snippet to move the search bar to secondary navigation:
https://docs.generatepress.com/article/navigation-search/#use-navigation-search-in-secondary-navigation

Adding PHP: https://docs.generatepress.com/article/adding-php/

Then go to Customizing > Layout > Secondary Navigation, set navigation location to Float right.

Once they are all done, we can try to use css to position it.

Let me know :)