1 reply [Last post]
joshblease
joshblease's picture
Offline
newbie
Cheshire
Last seen: 6 years 27 weeks ago
Cheshire
Joined: 2014-01-30
Posts: 1
Points: 2

I have a navbar at the top of each page with a list of elements all with float: left; applied to them. I then have a company logo floating on the right hand side of the nav bar. The issue is that if I make the window too small, the logo will move underneath the list items, I need it to shrink in size.

I do have media queries for mobile devices, but this is when the screen is still too large for a mobile device. I may also mention that the number of items on the menu bar can change, so a media query for this is not suitable.

I can't get the code to work properly so I have included a link to my site with a live demo on it below.

Live link - http://rental.joshblease.co.uk/stack.php

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="http://rental.joshblease.co.uk/images/Logo.png" /></a>
    </div>
    <div class="Clear"></div>
</div>

CSS:

body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'CabinRegular';
    font-size: 16px;
}
#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(<a href="http://rental.joshblease.co.uk/images/NavBg.png" rel="nofollow">http://rental.joshblease.co.uk/images/NavBg.png</a>);
    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;
}

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 day 23 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Hi joshblease, Have you tried

Hi joshblease,
Have you tried width on the image as a percentage?