Проблема проектирования начальной загрузки навигационной панели

Мы разрабатываем новый сайт, а дизайнер создал панель навигации следующим образом, вы можете увидеть кривую (это то, что я пытаюсь взломать!)Проблема проектирования начальной загрузки навигационной панели

enter image description here

Ниже, как мой текущий заголовок

enter image description here

Это мой текущий HTML, я также должен был создать новый класс CSS для бренда, так что появится в середине экрана

<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
    <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
     </div> 
     <a class="navbar-brand" href='@Url.Action("Index", "Home")'>LOGO HERE</a> 
     <div class="collapse navbar-collapse" id="navbar-collapse-1"> 
      <ul class="nav navbar-nav navbar-left"> 
       <li><a href="#">PRODUCTS</a></li> 
       <li><a href="#">FLAVOUR LAB</a></li> 
      </ul> 
      <ul class="nav navbar-nav navbar-right"> 
       <li><a href="#">OUR STORY</a></li> 
       <li><a href="#">VISIT US ON LIFE INVADER</a></li> 
      </ul> 
     </div> 
    </div> 
</nav>

И КСС следующего

.navbar-brand { 
position: absolute; 
width: 100%; 
left: 0; 
top: 0; 
text-align: center; 
margin: auto; 
}

Когда я создаю тестовый файл и попытаться применить ИЭ стиль фонового изображение я получаю следующий результат, как вы можете видеть логотип с кривая наполовину отображается и отображается в левой части экрана.

enter image description here

Обновленный CSS

.navbar-brand { 
position: absolute; 
width: 100%; 
left: 0; 
top: 0; 
text-align: center; 
margin: auto; 
background-image: url('/Content/Images/TempLogoExample.png'); 
background-repeat: no-repeat; 
z-index: 9999; 
}

Я приложил тестовое изображение для тех, кто чувствует, что они хотят, чтобы пойти на это, любое решение/советы будут высоко оценены.

enter image description here

источник

2015-01-20 Code Ratchet

Он появляется в левом углу, потому что вы установили Left:0. попробуйте изменить это, используя процентный знак. Например: left: 45%; будет работать в вашем случае. если не пытаться изменить процентное значение.

источник

2015-01-20 06:08:37

Я применил 45%, который перетасовал его, но я до сих пор вижу только половину изображения? как я могу взять его поверх верха –

Попробуйте это .navbar { позиция: relative; } .navbar-brand { позиция: абсолютная; левый: 50%; margin-left: -50px! Important;/* 50% вашей ширины логотипа */ дисплей: блок; } –

Я рекомендую пойти с другим разметкой, чтобы достичь этого. Почему вы не можете использовать сетку столбцов в главном разделе, а затем приводить свои проекты внутрь. Ниже разметка поможет вам добиться этого.

<div class="collapse navbar-collapse" id="navbar-collapse-1"> 
       <div class="col-xs-4"> 
        <ul class="nav navbar-nav navbar-left"> 
         <li><a href="#">PRODUCTS</a></li> 
         <li><a href="#">FLAVOUR LAB</a></li> 
        </ul> 
       </div> 
       <div class="col-xs-4"> 
        <a class="navbar-brand" href='@Url.Action("Index", "Home")'>LOGO HERE</a> 
       </div> 
       <div class="col-xs-4"> 
        <ul class="nav navbar-nav navbar-right"> 
         <li><a href="#">OUR STORY</a></li> 
         <li><a href="#">VISIT US ON LIFE INVADER</a></li> 
        </ul> 
       </div> 
      </div>

источник

2015-01-20 06:24:22

Проблема проектирования начальной загрузки навигационной панели

ответ

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