Resizing logo in floating navigation bar

Question

I have a navigation bar that stays at the top of the screen. I must first say that I am aware that nav bars like this can be awkward on mobile devices, I have just removed the media queries from my code as it doesn't affect them.

My issue is that if a user has a screen that is too large for the mobile version, but too small to fit the entire nav bar in, then the company logo recedes underneath the bar and also under the lower elements. I want the logo to resize automatically, but I can't accomplish this yet. I have tried giving the logo link an automatic width and also messed around with other tags, but still no luck. The number of links on the menu bar can vary too, so there are currently 5 elements, but there can be any up to 7. I need this change in size to also affect the logo.

I've been told that the logo needs to be relative to the wrapper, but the NavBar div shrinks in size along with the window.

Live Link : http://rental.joshblease.co.uk/stack.php
Fiddle http://jsfiddle.net/dZVyZ/

Screenshots :

On a screen > 900px wide

On a screen < 900px wide

Required result

The last image has a smaller logo that shrinks when the width is too small

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

It is like you wrote in your question:

I've been told that the logo needs to be relative to the wrapper, but the NavBar div shrinks in size along with the window.

you will need to define, how much space you are willing to give to the logo element. Since you want a responsive solution you can define this in percentage.

i'd suggest to limit the size of your navigation to something about 70%. You can also add a min-width:; to prevent the list items from breaking. It looks like the media query is taking effect too late, since some of the list items of the navigation become too short.

To your problem. I've added some CSS that hopefully do what you need:

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

Test-Fiddle: http://fiddle.jshell.net/p28HE/

Edit: you can also remove the float.right from #NavLogo

With this solution the Logo will take up a maximum of 30% of the screen width. This can be altered with css and override width media queries for a better mobile view. Place comment if this solution is working for you or what I may have missed.

Answer 2

Easiest solution would be css calc function in #Navlogo like following; adjust the height with the same method; so it wouldn't look like stretched or squeezed.

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

But if you ask me I rather go with javascript or jQuery for better control. Plus I didn't like the orientation as well; it would be better if you put <ul> in separate <div> and the image in a different <div> . Hope this helps for now.

Answer 3

Check this fiddle out: http://jsfiddle.net/Diesel9Design/dZVyZ/1/

I gave the UL a fixed size and made it float left:

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

Then I wrapped the logo in a div and gave it a margin left of 500px. This allows the div to figure out the remaining size available. Then I made the logo width of 100%, BAM it'll resize itself to the remaining space.

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