Create different Post header

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?

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

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; ?> 

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?

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

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.

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 :)

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.

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

Is the CSS code not working?

OK,

Is the CSS code not working?

I was waiting for the 'simpler' filter :)

Yeah it needs more testing. Stay tuned :)