Support » Fixing WordPress » twentyseventeen header overlapping on mobile device

  • shaibustephen

    (@shaibustephen)


    I am trying to customize the twentyseventeen theme of the wordpress. I removed the header image background and added topbar and banner above the nagivation. My problem now is that something is overlapping my newly added topbar and banner at the header section of my site when view on mobile phone. despite adding background color to the above two, the background colours did not show up on mobile screen. Though it shows the above listed added background on desktop. Kindly view the [ redundant link removed ] involved

    • This topic was modified 11 months ago by Jan Dembowski.
    • This topic was modified 11 months ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not a Requests and Feedback topic

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)
  • Michael Arestad

    (@michael-arestad)

    I took a look. I don’t see anything overlapping the topbar element. I suspect that could be the WordPress admin bar. Could you provide a screenshot?

    As for the colors, I see that the styles written for them are inside of a CSS media query. This particular media query limits any styles written within it to appear on a screen that is 48em and wider which is about tablet-sized and larger. That means on screens smaller than 48em wide, those rules will be ignored. You can resolve this by moving your custom CSS outside the media query.

    Thread Starter shaibustephen

    (@shaibustephen)

    Please, how do i remove my custom CSS outside the media query? Give me hinted (CSS) following what i have done above? How do i send screen attachment using this platform?

    Michael Arestad

    (@michael-arestad)

    Good question. From what I can tell, it looks like you edited the theme’s stylesheet and added the CSS.

    What I would do is remove the CSS you wrote and, instead, write the same CSS but at the bottom of the stylesheet.

    Here is what you want to see:

    .banner{background: red}
    .topbar{background: green}

    Currently, that code is actually inside a media query like this:

    @media screen and (min-width: 48em) {
    	.banner{background: red}
    	.topbar{background: green}
    }
    
    Thread Starter shaibustephen

    (@shaibustephen)

    Ok. Thanks

    Thread Starter shaibustephen

    (@shaibustephen)

    Another question. If i want to retain background image of the default seventeen theme therein, how do i reduce the height size. From the default theme, height is pegged at 100% and something like 1000px. Asuming i want the background image height to just be 90px

    Michael Arestad

    (@michael-arestad)

    That’s a bit more complex. You would need to override those particular styles. You can see the selectors and styles in the stylesheet around line 1748 and they currently look like this:

    /* For browsers that support 'object-fit' */
    @supports ( object-fit: cover ) {
    	.has-header-image .custom-header-media img,
    	.has-header-video .custom-header-media video,
    	.has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img {
    		height: 100%;
    		left: 0;
    		-o-object-fit: cover;
    		object-fit: cover;
    		top: 0;
    		-ms-transform: none;
    		-moz-transform: none;
    		-webkit-transform: none;
    		transform: none;
    		width: 100%;
    	}
    }
    

    I think this is one that could be a bit tricky as you might need to customize the style in several places.

    Thread Starter shaibustephen

    (@shaibustephen)

    To overcome the header problem, i have resolved to do away with default twentyseven header and opt for bootstrap base header and nav menu. I have integrated wp_bootstrap_navwalker() menu to it and i am yet to get it fully. Though, it display menu but they not collapsing like on mobile device.

    what do you think i have done wrong?
    Here below is my bootstrap navigation code and below is what i have done on my wordpress. My nav

    <nav class="navbar navbar-expand-md fixed-top-sm justify-content-start flex-nowrap ">
        <div class="container">
    					<div class="navbar-brand">
    									logo
    					</div>
        <ul class="navbar-nav flex-row ml-auto">
            <li class="nav-item active">
                <a class="nav-link px-2" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link px-2" href="#">Link</a>
            </li>
            <li class="nav-item">
                <a class="nav-link px-2" href="#">Link</a>
            </li>
        </ul>
        <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbar2">
            <span class="navbar-toggler-icon"></span>
        </button>
    	</div>
    </nav>
    <nav class="navbar navbar-expand-md bg-success navbar-light">
        <div class="container">
    		<div class="navbar-collapse collapse pt-2 pt-md-0" id="navbar2">
    
            <ul class="navbar-nav">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Link 2</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link 2</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link 2</a>
                </li>
            </ul>
        </div>
    	</div>
    </nav>		
    <!-- #masthead -->
    
    <nav class="navbar navbar-expand-md fixed-top-sm justify-content-start flex-nowrap ">
        <div class="container">
    					<div class="navbar-brand">
    									<?php if ( is_front_page() ) : ?>
    				<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
    			<?php else : ?>
    				<p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
    			<?php endif; ?>
    
    			<?php
    			$description = get_bloginfo( 'description', 'display' );
    
    			if ( $description || is_customize_preview() ) :
    				?>
    				<p class="site-description"><?php echo $description; ?></p>
    			<?php endif; ?>
    					</div>
    
        <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbar2">
            <span class="navbar-toggler-icon"></span>
        </button>
    	</div>
    </nav>
    <nav class="navbar navbar-expand-md bg-success navbar-light">
                    <?php
                    wp_nav_menu(array(
                    'theme_location'    => 'primary',
                    'container'       => 'div',
                    'container_id'    => 'main-nav',
                    'container_class' => 'navbar-collapse collapse pt-2 pt-md-0',
                    'menu_id'         => 'navbar2',
                    'menu_class'      => 'navbar-nav',
                    'depth'           => 3,
                    'fallback_cb'     => 'wp_bootstrap_navwalker::fallback',
                    'walker'          => new wp_bootstrap_navwalker()
                    ));
                    ?>
    </nav>		
    <!-- #masthead -->
    Michael Arestad

    (@michael-arestad)

    > what do you think i have done wrong?

    My guess is that a class or element is missing that the CSS targets. That said, I think you’re venturing into territory where it would be good for you to either learn a bit more about CSS, HTML, and PHP, or maybe even find a developer to help you out.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘twentyseventeen header overlapping on mobile device’ is closed to new replies.