CODEWITHSUNDEEP
csswordpresstwitter-bootstrap
Karel
Karel

Reputation: 3

bootstrap navbar not aligned properly

I'm running a site navrcholu.cz on latest wordpress and bootstrap. However my navbar is not displayed correctly expecially on tablets. It should be always like 30px from the top of the page. On desktop PC with FF or Chrome looks OK. Here is navbar code:

  <header class="container-fluid header-pic">
    <nav class="navbar navbar-default navbar-static-top">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar1">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>                        
          </button>
            <?php if((is_home()) or (is_page()) or (is_search())) : ?>
            <div class="navbar-brand">
                <h1 class="h1trans"><a href="<?php echo get_option('home'); ?>"><?php bloginfo('name'); ?></a></h1>
            </div>
            <?php else : ?>
            <div class="navbar-brand">
                <h2 class="h1trans"><a href="<?php echo get_option('home'); ?>"><?php bloginfo('name'); ?></a></h2>
            </div>
            <?php endif; ?>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar1">
            <?php
                wp_nav_menu( array(
                'menu'              => 'primary',
                'theme_location'    => 'primary',
                'depth'             => 2,
                'menu_class'        => 'nav navbar-nav',
                'fallback_cb'       => 'wp_bootstrap_navwalker::fallback',
                'walker'            => new wp_bootstrap_navwalker()));
            ?>
            <?php get_search_form(); ?>
        </div>
    </nav>
</header>

A header-pic class goes here:

 .header-pic {
 background-image: url("pics/img.jpg");
 background-attachment: fixed;
 background-position: top left;
 background-size: 100% 100%;
 background-repeat: no-repeat;
 height: 65%;
 margin-bottom: 15px;
 margin-top:-20px;
}

I make a use of couple media queries, asking for the width and serving smaller or bigger header picture accordingly. I am not overriding a positon property of bootstrap navbar itself.

Like this:

@media screen and (min-width: 385px) and (max-width: 769px)  {
   .header-pic {
    background-image: url("pics/img50.jpg");
    background-position: top left;
    height: 65%;
    }}

What I am doing wrong? Thank you for your time!

Upvotes: 0

Views: 1222

Answers (1)

Ajay Kulkarni
Ajay Kulkarni

Reputation: 3039

Based on your question, I'd modify the CSS like this: 

nav
{
   position: fixed;
   top: 0px;
}

Upvotes: 1

Related Questions