Изменение размера логотипа в плавающей навигационной панели

Question

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

Моя проблема заключается в том, что если у пользователя есть экран, который слишком велик для мобильной версии, но слишком мал, чтобы соответствовать всей навигационной панели, логотип компании отступает под панелью, а также под нижними элементами. Я хочу, чтобы логотип автоматически изменялся, но я пока не могу этого сделать. Я попытался дать ссылку на логотип автоматической шириной, а также испортился с другими тегами, но все равно не повезло. Количество ссылок в строке меню также может меняться, поэтому в настоящее время существует 5 элементов, но их может быть до 7. Мне нужно это изменение размера, чтобы также повлиять на логотип.

Мне сказали, что логотип должен быть относительно обертки, но div NavBar уменьшает размер вместе с окном.

Живая Ссылка: http://rental.joshblease.co.uk/stack.php
Fiddlehttp://jsfiddle.net/dZVyZ/

Скриншоты:

На экране> 900px широкий

На экране < 900px широкий

Требуемый результат

Последнее изображение имеет меньший логотип, который сжимается, когда ширина слишком мала

HTML:

<div id="MainWrapper"> 
<div id="NavBar"> 
     <ul> 
      <li class="Down DownBlue"><a href="/index/">Home</a></li> 
      <li class="Green"><a href="/Property/">View</a></li> 
      <li class="Pink"><a href="/About/">About Us</a></li> 
      <li class="Purple"><a href="/Josh/">Josh Blease</a></li> 
      <li class="Orange"><a href="/Contact/">Contact</a></li> 
     </ul> 
     <a href="/index/"><img id="NavLogo" src="/Images/Logo.png" /></a> 
    </div> 
    <div class="Clear"></div> 
</div> 

CSS:

#MainWrapper { 
    max-width: 900px; 
    width: 100%; 
    margin: 0 auto 0 auto; 
} 
.Clear{ 
    clear: both; 
} 
#NavBar{ 
    overflow: hidden; 
    display: block; 
    position: fixed; 
    width: inherit; 
    max-width: 900px; 
    z-index: 999; 
    height:70px; 
    background: url(../Images/NavBg.png); 
    padding-left: 10px; 
} 
#NavBar ul{ 
    list-style: none; 
} 
#NavBar li{ 
    float: left; 
    padding: 20px 0 10px; 
    margin-right: 10px; 
} 
#NavBar li a{ 
    padding: 30px 10px 10px; 
    background-color: #CBCBCB; 
    color: #000; 
    font-size: 17px; 
    border-bottom-right-radius: 5px; 
    border-bottom-left-radius: 5px; 
    -webkit-border-bottom-right-radius: 5px; 
    -webkit-border-bottom-left-radius: 5px; 
    -moz-border-radius-bottom-right: 5px; 
    -moz-border-radius-bottom-left: 5px; 
    transition: background 300ms ease-in-out; 
    -webkit-transition: background 300ms ease-in-out; 
    -moz-transition: background 300ms ease-in-out; 
    -ms-transition: background 300ms ease-in-out; 
    -o-transition: background 300ms ease-in-out; 
} 
#NavBar .Down, .JavaOff #NavBar li:hover{ 
    padding-top: 30px; 
} 
#NavLogo{ 
    float: right; 
    height: 60px; 
    padding: 5px 15px; 
} 

Answer 1

Это, как вы написали в вашем вопросе:

Я сказал, что логотип должен быть по отношению к обертке, но NavBar ДИВ уменьшается в размерах вместе с окном.

необходимо определить, сколько места вы готовы предоставить элементу логотипа. Поскольку вы хотите реагировать на решение, вы можете определить это в процентах.

Я предлагаю ограничить размер вашей навигации примерно до 70%. Вы также можете добавить min-width :; для предотвращения перебора элементов списка. Похоже, что медиа-запрос вступает в силу слишком поздно, так как некоторые элементы списка навигации становятся слишком короткими.

К вашей проблеме.Я добавил некоторые CSS, что мы надеемся сделать то, что вам нужно:

#NavBar ul 
{ 
    margin:0; 
    padding: 0; 

    float: left; 
    width: 70%; 
} 

#NavBar ul + a 
{ 
    display: block; 
    margin-left: 70%; 
    text-align: right; 
    width: 30%; 
} 


#NavLogo 
{ 
    display: inline-block; 
    margin-top: 10px; 
    max-width: 100%; 
    height: auto; 
} 

Тест-Fiddle: http://fiddle.jshell.net/p28HE/

Edit: Вы можете также удалить float.right из #NavLogo

С помощью этого решения логотип будет принимать максимум 30% от ширины экрана. Это может быть изменено с помощью запросов css и переопределения ширины для лучшего мобильного вида. Разместите комментарий, если это решение работает на вас или что я, возможно, пропустил.

Answer 2

Простым решением будет функция css calc в #Navlogo, например, следующая; отрегулируйте высоту тем же способом; поэтому он не будет выглядеть растянутым или сжатым.

#NavLogo { 
float: right; 
height: 60px; 
padding: 5px; 
width: calc(100% - 500px); 
} 

Но если вы спросите меня, я скорее поеду с javascript или jQuery для лучшего контроля. Плюс мне тоже не понравилась ориентация; было бы лучше, если вы разместили <ul> в отдельном <div> и изображения в другом формате <div>. Надеюсь, теперь это поможет.

Answer 3

Проверить эту скрипку из: http://jsfiddle.net/Diesel9Design/dZVyZ/1/

Я дал UL фиксированный размер и сделал поплавка слева:

#NavBar ul { 
    list-style: none outside none; 
    width:500px; 
    float: left; 
} 

Тогда я завернула логотип в DIV и дал ему запас слева от 500px , Это позволяет div определить оставшийся размер. Затем я сделал ширину логотипа 100%, BAM она изменит размер до оставшегося пространства.

<div class="logoWrap"> 
     <a href="/index/"><img id="NavLogo" src="http://rental.joshblease.co.uk/images/Logo.png" /></a> 
</div> 

.logoWrap { 
    margin-left:500px; 
    padding:10px 0 0; 
} 

#NavLogo { 
    width:100%; 
}