twentyseventeen header overlapping on mobile device

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.

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?

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}
}

• This reply was modified 4 years, 8 months ago by Michael Arestad.

Ok. Thanks

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

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.

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

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