Custom header

Hi there,

I believe the generate_menu_bar_items hook would be what you are looking for:
https://docs.generatepress.com/article/generate_menu_bar_items/

Leo,

I ended up splitting header in two sections based on below technique. On desktop, I wanted to float section-2 items to the right. On mobile view (max-width: 768px), I wanted to display section-1 and section-2 in two rows and also have section-2 items displayed in one row and center aligned. I referenced below resource to achieve it.
https://docs.generatepress.com/article/split-header-three-sections/

Here is the html and css. Could you please review css and see if the css requires fixing or better way to achieve this?

<div class="header-section">
	<div class="inside-header grid-container section-1">
		<div class="site-branding">
			<p class="main-title" itemprop="headline"><a href="https://remotted.com/" rel="home">Remotted</a></p>
		</div>
	</div>
	<div class="inside-header grid-container section-2">
		<?php if (is_user_logged_in()) { ?>
		<a class="employer-menu-link" href="https://remotted.com/employer-panel/logout/">Log out</a>
        <?php } else { ?>
        <a class="employer-menu-link" href="https://remotted.com/employer-panel/">Employers</a>
        <?php } ?>
		<a class="button post-a-job" href="/post-a-job/">Post a Job</a>
	</div>
</div>

css:

.header-section {
    display: flex;
    flex-wrap: wrap;
	background-color: #fff;
}
.header-section > div {
    width: calc(100% / 2);
}
.section-2 {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
}
.employer-menu-link, .post-a-job {
		font-size: 16px;
		font-weight: bold;	    
		margin-left: 40px;
	}
@media (max-width: 768px) {
    .header-section {
		margin: 0;
		padding: 0;
     	flex-direction: column;
    }
	.section-2 {
		padding-top: 0px;
	}
    .header-section > div {
        flex: 1;
        width: 100%;
		align-items: center;
		justify-content: center;
    }
}

This looks good, but it also looks like something that could be achieved with our regular layout without needing to implement your own header. What was stopping you from using our default navigation with this?

Tom,
I didn't want to load default navigation and found you already had working solution to achieve this. I created a child theme to preserve custom code.

Cool, you should be good to go then :)

Hi Tom,

Back to this closed issue - I'm trying to figure out how to have header aligned with rest of the body content on desktop view. If I put width 1200px on header element, it is not working on smaller screens. How could I achieve below? Here is the screenshot of what I'm trying to achieve and on smaller screens everything is ok.

https://pasteboard.co/JR4cyBb.png

Hi there,

Have you tried give the content container some more left/right paddings?
https://docs.generatepress.com/article/content-padding/

Let me know :)

Thanks Ying,

I wanted to control header with below code and on desktops but not with paddings. I wanted to have header same width as content container. So how do I go about defining header width?

.header-section {
    display: flex;
    flex-wrap: wrap;
	background-color: #fff;
}
.header-section > div {
    width: calc(100% / 2);
}
.section-2 {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
}
.employer-menu-link, .post-a-job {
		font-size: 16px;
		font-weight: bold;	    
		margin-left: 40px;
	}
@media (max-width: 768px) {
    .header-section {
		margin: 0;
		padding: 0;
     	flex-direction: column;
    }
	.section-2 {
		padding-top: 0px;
	}
    .header-section > div {
        flex: 1;
        width: 100%;
		align-items: center;
		justify-content: center;
    }
}

Sorry I don't quite understand what you are trying to achieve.

You want the header to be the same width as content container which it is now, so what's the issue?

Exactly,
I wanted both of them to be the same width. I added following on .header-section and kind of worked. Not sure if this is the right way.

.header-section {
	margin-left: auto;
	margin-right: auto;
	max-width: 1200px;	
    display: flex;
    flex-wrap: wrap;
	background-color: #fff;
}

Yes, your CSS works well.

Another option is to add a CSS class to the site-header: grid-container.

Then it will keep the header and content container same max width, even you change your container width in customizer in the future.

Below is the header html structure. I do have grid-container class there. Did I miss anything?

<header id="masthead" class="site-header header-section" itemtype="https://schema.org/WPHeader" itemscope>
<div class="inside-header grid-container section-1">
		<div class="site-branding">
			<p class="main-title" itemprop="headline">
				<a href="#" rel="home">Site Name</a>
			</p>
		</div>
	</div>
	<div class="inside-header grid-container section-2">
		<a class="employer-menu-link" href="#">Find a Job</a>
				<a class="employer-menu-link" href="#">Dashboard</a>
		<a class="employer-menu-link" href="#">Log out</a>
        		<a class="button post-a-job" href="#">Post a Job</a>
	</div>
</header>

It should be in the same level as site-header, not inside-header.

So this part should be like this:
<header id="masthead" class="site-header header-section grid-container" itemtype="https://schema.org/WPHeader" itemscope>

Thank you!
This looks exactly the way I wanted.