Support » Theme: Twenty Seventeen » Menu bar positioning

  • Resolved Bam Bam

    (@bam-bam)


    Hi all,

    I am trying to modify the Twenty Seventeen theme only on some pages.

    I am using it as a shop and wanted to get rid of the header image on some pages, like Cart, Checkout etc.

    I managed to hide the header with some css, but in hiding the header it also hides the menu bar.

    I managed to get it to show up again, but now it floats between the top of the page and the bottom of the page, depending on where you are on the page.

    Now that wouldn’t be all that much of a problem with the exception that the menu won’t show up at all when viewing on a mobile and when it is on the bottom of the screen on a desktop, the drop downs are not visible.

    Can anyone advise me on what to do to remedy this.

    Website: http://www.hhhworldevents.org/hashgear/

    Kindest Regards
    Bam Bam

Viewing 10 replies - 1 through 10 (of 10 total)
  • Hi,
    Create a child theme.
    Create a custom page template in the child theme.
    In this template, you can remove the call get_template_part() for header image.

    For the pages for which you don’t want the header image, choose this template.

    Hope this helps.

    Thanks, I was going to go down that path originally and decided to try with the css first.

    By the way, I am using a child theme, I always do.

    If you already have the child theme, then it is cleaner to do it with templates.

    If you go the CSS way, you will have to hard-code some page ids. As you add more pages to this, you have to keep modifying the CSS.

    What do you think?

    Page/Post id’s is what I used to code out the pages without it now and the thought did occur to me that it could become an issue down the track.

    Ok, I found a similar post about Twenty Sixteen and used a portion of the solution to fix this.

    Rather than using the page template I modified the header.php

    From this:

    <header id="masthead" class="site-header" role="banner">
    
    		<?php get_template_part( 'template-parts/header/header', 'image' ); ?>

    To this:

    
    <header id="masthead" class="site-header" role="banner">
    
    		<?php if ( get_header_image() ) : ?>
    				
    				<?php
    					if(is_front_page()){?>
    						<div class="header-image">
    							<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
    								<img src="<?php header_image(); ?>" srcset="<?php echo esc_attr( wp_get_attachment_image_srcset( get_custom_header()->attachment_id ) ); ?>" sizes="<?php echo esc_attr( $custom_header_sizes ); ?>" width="<?php echo esc_attr( get_custom_header()->width ); ?>" height="<?php echo esc_attr( get_custom_header()->height ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">
    							</a>
    						</div>
    
    					<?php
    
    					}
    				?>
    
    			<?php endif; // End header image check. ?>

    Only issue is the Menu Bar is now pinned to the top, but that is ok with me and it now stays pinned to the top on mobiles.

    Bam Bam

    • This reply was modified 2 years, 3 months ago by  Bam Bam.

    Ah! Glad that the issue is resolved 🙂

    Menaka,

    Hi, I am using Twenty Seventeen again for a site for a friend of mine and I used that code I used before to hide the Header Image on certain pages, but it has hidden or removed the Site Title and Tagline.

    I can’t see what is causing that, any suggestions on how to remedy that ??
    https://www.bam-web-design.com/rumahputria/

    Kindest regards
    Bam Bam

    • This reply was modified 2 years, 1 month ago by  Bam Bam.

    Never mind, I got it sorted with a simple bit of css.

    .site-branding {
      display: none;
    }
    
    .home .site-branding {
      display: inherit;
    }
    Bam Bam

    (@bam-bam)

    Hi,

    I have just built another Twenty Seventeen site and I am trying to implement some of what I did above, but with mixed success.

    What I want to do is have the header completely resize to any screen size, like this previous site does HERE, but on that site I don’t use the site title, I have it in the header image.

    However when I try to apply the same code to the new site HERE, the header image resizes perfectly, but the site-title disappears and I cannot see why.

    Below is the code that resizes the header image and moves the menu to the top, I see nothing in there that would hide the site branding, but then again php does my head in ??

    <header id="masthead" class="site-header" role="banner">
    
    		<?php if ( get_header_image() ) : ?>
    				
    				<?php
    					if(is_front_page()){?>
    						<div class="header-image">
    							<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
    								<img src="<?php header_image(); ?>" srcset="<?php echo esc_attr( wp_get_attachment_image_srcset( get_custom_header()->attachment_id ) ); ?>" sizes="<?php echo esc_attr( $custom_header_sizes ); ?>" width="<?php echo esc_attr( get_custom_header()->width ); ?>" height="<?php echo esc_attr( get_custom_header()->height ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">
    							</a>
    						</div>
    					<?php
    					}
    				?>
    
    			<?php endif; // End header image check. ?>
    
    		<?php if ( has_nav_menu( 'top' ) ) : ?>
    			<div class="navigation-top">
    				<div class="wrap">
    					<?php get_template_part( 'template-parts/navigation/navigation', 'top' ); ?>
    				</div><!-- .wrap -->
    			</div><!-- .navigation-top -->
    		<?php endif; ?>
    
    	</header><!-- #masthead -->

    Kindest Regards
    Bam Bam

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Menu bar positioning’ is closed to new replies.