[Resolved] Create different Post header

[Killian]

I have a static home page with a header and sticky mobile header the http://www.artobatours.com/. For my Posts Page and Posts, I want a different header: I only want it to appear like the sticky mobile header, except I don’t want the header bar to be transparent as it is for the other pages. How can I do this?

[Leo]

Hi there,

Sorry not quite sure what you are after…so different style of header for blog page and single posts?

Or you are referring to different menu item?

[Killian]

Hi, different style of header for blog page and single posts

[Leo]

So basically a different style for the logo and site title part?

If so you can use the the before header content hook:
http://demo.generatepress.com/hook-locations/
https://docs.generatepress.com/article/hooks-overview/

With conditional tag like this and check execute PHP

<?php if ( is_single() || is_home() ) : ?>
     <div class="header_banner">
        Your stuff in here
    </div>
<?php endif; ?> 

[Killian]

So basically a different style for the logo and site title part?

If so you can use the the before header content hook:
http://demo.generatepress.com/hook-locations/
https://docs.generatepress.com/article/hooks-overview/

With conditional tag like this and check execute PHP

<?php if ( is_single() || is_home() ) : ?>
     <div class="header_banner">
        Your stuff in here
    </div>
<?php endif; ?> 

And this will replace the normal style of header, and replace it with the sticky mobile header only, even if see on non-mobile device?

[Leo]

Hmm I can’t picture what you are after…so you are wanting slideout menu only on blog and posts pages?

[Killian]

I have a page http://www.artobatours.com/ that has a header with a logo and a site title and tagline, and below this is a menu bar with links and the bar is transparent. In mobile view, the header with a logo and a site title and tagline are not visible, and the links on the menu bar are seen as the hamburger icon, and the menu bar has a small logo.

I want to keep them as is.

For the blog and posts pages I do not want to see large logo, site title, and tagline: I only want to see the menu bar like it appears as if viewed on mobile device (whether viewed on desktop or mobile), i.e. with small logo and hamburger icon. But, I do not want the menu bar to be transparent.

I hope that explains.

[Leo]

Ok a bit long but try this CSS:

@media (max-width: 2000px) {
	.blog .main-navigation .menu-toggle,
        .archive .main-navigation .menu-toggle,
        .single .main-navigation .menu-toggle {
		display: block;
	}
	
	.blog .main-navigation ul, 
	.archive .main-navigation ul,
	.single .main-navigation ul {
		display: none;
	}
	
	.blog .main-navigation.toggled .main-nav > ul,
	.archive .main-navigation.toggled .main-nav > ul,
	.single .main-navigation.toggled .main-nav > ul {
		display: block;
	}
	
	.blog .main-navigation .main-nav ul ul, 
	.archive .main-navigation .main-nav ul ul,
	.single .main-navigation .main-nav ul ul {
		position: relative;
		top: 0;
		left: 0;
		width: 100%;
	}
	
	.blog .main-navigation .main-nav .sf-menu > li, 
	.archive .main-navigation .main-nav .sf-menu > li,
	.single .main-navigation .main-nav .sf-menu > li {
		float: none;
		clear: both;
		display: block !important;
		text-align: left !important;
	}
	
	.blog .main-navigation .sub-menu.toggled-on,
	.blog .main-navigation .children.toggled-on,
	.archive .main-navigation .sub-menu.toggled-on,
	.archive .main-navigation .children.toggled-on,
	.single .main-navigation .sub-menu.toggled-on,
	.single .main-navigation .children.toggled-on {
		display: block !important;
		opacity: 1 !important;
	}
	
	.blog .main-navigation .dropdown-menu-toggle:before,
	.archive .main-navigation .dropdown-menu-toggle:before,
	.single .main-navigation .dropdown-menu-toggle:before {
		content: "\f107" !important;
	}
	
	.blog .main-navigation .sfHover > a .dropdown-menu-toggle:before,
	.archive .main-navigation .sfHover > a .dropdown-menu-toggle:before,
	.single .main-navigation .sfHover > a .dropdown-menu-toggle:before {
		content: "\f106" !important;
	}
	
	.blog .main-navigation .menu-item-has-children .dropdown-menu-toggle,
	.archive .main-navigation .menu-item-has-children .dropdown-menu-toggle,
	.single .main-navigation .menu-item-has-children .dropdown-menu-toggle {
		float: right;
	}
	
	.blog .main-navigation .mobile-bar-items,
	.archive .main-navigation .mobile-bar-items,
	.single .main-navigation .mobile-bar-items {
		display: block;
	}
	
	.blog .main-navigation .menu li.search-item,
	.archive .main-navigation .menu li.search-item,
	.single .main-navigation .menu li.search-item {
		display: none !important;
	}
	
	.blog .main-navigation .sf-menu > li.menu-item-float-right,
	.archive .main-navigation .sf-menu > li.menu-item-float-right,
	.single .main-navigation .sf-menu > li.menu-item-float-right {
		float: none !important;
		display: inline-block;
	}
	
	.blog [class*="nav-float-"] .site-header .inside-header > *,
	.archive [class*="nav-float-"] .site-header .inside-header > *,
	.single [class*="nav-float-"] .site-header .inside-header > * {
		float: none;
		clear: both;
	}
}

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

Tom is researching ways to initiate the mobile menu using a simple filter 🙂

[Killian]

Tom is researching ways to initiate the mobile menu using a simple filter

Hi, any progress on a filter? I never used the very long CSS approach.

[Leo]

Sorry not a simple feature so it still needs extensive testing.

Is the CSS code not working?

[Killian]

OK,

Is the CSS code not working?

I was waiting for the ‘simpler’ filter 🙂

[Leo]

Yeah it needs more testing. Stay tuned 🙂

[Author]

Posts