[Resolved] Custom header

Home Forums Support Custom header

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #1657148
    WP

    Hi,
    I’m trying to display Call-to-action button and one additional link in ‘Navigation’ area without enabling Menu(primary). I’ve displayed it with Widgets->Header->Custom HTML, but for additional link, I wanted to generate it dynamically with php. Users should see ‘Employer Panel’ prior logging in and once they login, it should change to Logout. Since html widget does not support php, how could I do it utilizing hook or custom function in child theme without enabling primary or secondary navigation?

    I’m trying to have below code working through hook.

    
    
    function rkk_add_auth_links( $items, $args ) {
    if ( is_user_logged_in() ) {
    $items .= '<li><a href="'. wp_logout_url() .'">Log Out</a></li>';
    }
    elseif ( !is_user_logged_in() ) {
    $items .= '<li><a href="'. site_url('wp-login.php') .'">Log In/Register</a></li>';
    $items .= '<li><a href="'. site_url('wp-login.php?action=register') .'">Register</a></li>';
    $items .= '<li><a href="'. site_url('wp-login.php?action=lostpassword') .'">Lost Password</a></li>';
    }
    return $items;
    }
    
    #1657173
    Leo
    Staff
    Customer Support

    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/

    #1657399
    WP

    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;
        }
    }
    
    #1658205
    Tom
    Lead Developer
    Lead Developer

    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?

    #1658294
    WP

    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.

    #1659497
    Tom
    Lead Developer
    Lead Developer

    Cool, you should be good to go then πŸ™‚

    #1681948
    WP

    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

    #1682242
    Ying
    Staff
    Customer Support

    Hi there,

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

    Let me know πŸ™‚

    #1682410
    WP

    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;
        }
    }
    #1682461
    Ying
    Staff
    Customer Support

    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?

    #1682476
    WP

    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;
    }
    
    #1682488
    Ying
    Staff
    Customer Support

    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.

    #1682493
    WP

    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>
    
    
    #1682501
    Ying
    Staff
    Customer Support

    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>

    #1682716
    WP

    Thank you!
    This looks exactly the way I wanted.

Viewing 15 posts - 1 through 15 (of 16 total)
  • You must be logged in to reply to this topic.