[Resolved] Create different Post header

Home Forums Support Create different Post header

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #342832
    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?

    GP Premium 1.3.1
    #342872
    Leo
    Staff
    Customer Support

    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?

    #342887
    Killian

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

    #342892
    Leo
    Staff
    Customer Support

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

    #342920
    Leo
    Staff
    Customer Support

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

    #342930
    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.

    #343207
    Leo
    Staff
    Customer Support

    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 🙂

    #371340
    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.

    #371400
    Leo
    Staff
    Customer Support

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

    Is the CSS code not working?

    #371417
    Killian

    OK,

    Is the CSS code not working?

    I was waiting for the ‘simpler’ filter 🙂

    #371450
    Leo
    Staff
    Customer Support

    Yeah it needs more testing. Stay tuned 🙂

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