Как переместить Bootstrap Navbar ниже на странице

Я использую тему Roots для Wordpress в настоящее время, и я пытаюсь понять, как я могу переместить навигационную панель на основе начальной загрузки на моей странице. В настоящее время он подталкивается к самой верхней части страницы, и я не могу понять, как сделать это ниже фонового изображения. Сейчас он сидит поверх фонового изображения, когда я хочу, чтобы навигационная панель была ниже него.Как переместить Bootstrap Navbar ниже на странице

Вот мой заголовок HTML:

<header class="banner navbar navbar-default navbar-static-top" role="banner"> 
    <div class="container"> 
    <div class="navbar-header"> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" 
     data-target=".navbar- collapse"> 
    <span class="sr-only">Toggle navigation</span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    </button> 
    <a class="navbar-brand" href="<?php echo home_url(); ?>/"> 
    <?php bloginfo('name'); ?> 
    </a> 
    </div> 

    <nav class="collapse navbar-collapse" role="navigation"> 
    <?php 
    if (has_nav_menu('primary_navigation')) : 
     wp_nav_menu(array('theme_location' => 'primary_navigation', 'menu_class' => 
    'nav navbar-nav')); endif; ?> 
    </nav> 
    </div> 
</header>

Текущий Less/CSS, относящиеся к области Nav (в основном это сырье из variables.less файла Bootstrap):

@media (min-width: @screen-lg) { .navbar{ width: 940px;} } 
@navbar-height:     55px; 
@navbar-margin-bottom:    @line-height-computed; 
@navbar-default-color:    #777; 
@navbar-default-bg:    @brand-medalist; 
@navbar-default-border:   darken(@navbar-default-bg, 6.5%); 
@navbar-border-radius:    @border-radius-base; 
@navbar-padding-horizontal:  floor(@grid-gutter-width/2); 
@navbar-padding-vertical:   ((@navbar-height - @line-height-computed)/2); 
@nav-link-padding:       10px 15px;

Я имея проблемы с выяснением того, какой CSS я могу манипулировать здесь, в моем файле app.less или файле variable.less, чтобы нажимать навигатор, как я уже говорил. Я попытался поместить изображение div над классом заголовка, но я не знаю, считается ли это лучшей практикой или нет. Пожалуйста, дайте мне знать, если вам нужно что-нибудь еще от меня. Я немного смущен тем, куда идти отсюда. Благодаря!

источник

2013-12-11 user3092983

Было бы полезно увидеть CSS, который у вас есть сейчас. Ответ, безусловно, будет полностью основан на CSS. Возможно, ты можешь это исправить. – SunSparc

В настоящее время я использую весь фондовый CSS, который входит в файл variables.less с Bootstrap. Но я могу предоставить его, если это необходимо. – user3092983

Начальное чтение http://getbootstrap.com/components/#navbar Bootstrap рядом с навигационной панелью по умолчанию предоставляют различные типы навигаторов. Фиксированные сверху, фиксированные донизу и статические вершины. Вы устанавливаете тип, добавляя класс к своему <nav class="navbar navbar-default" role="navigation">

В вашем коде вы используете navbar-static-top. Вы можете добавить маржу верхом к нему, чтобы установить его в нижнее положение:

<nav class="navbar navbar-default" role="navigation" style="margin-top:100px;"> или .navbar-static-top{margin-top:100px;}

источник

2013-12-12 09:49:43

Попробуйте использовать этот класс navbar-fixed-top. Это приведет к тому, что панель меню вернется к верхней части веб-страницы. Это может быть, как вы, вероятно, должны это делать. <header class="banner navbar navbar-default navbar-static-top" role="banner">

источник

2016-03-22 12:26:32 user3153983

Как переместить Bootstrap Navbar ниже на странице

ответ

Смежные вопросы