0

I've got a working navigation bar, but can't seem to figure out how to make the spacer auto adjust width as the page adjusts. I used to float the #navbar div but, that was wrapping underneath the logo when the window would get small. so, this was my solution:

CSS floats - how do I keep them on one line?
(I used the second suggestion if you can't tell by my code)

This helped keep my #navbar on the same line, but because it couldn't be floated anymore, it moved all the way to the right side of the #logo. To fix this issue, I put a spacer between #logo and #navbar, but I'm having trouble keeping the #navbar visible on the window when I make the window smaller. I've tried this technique:

https://jsfiddle.net/thirtydot/EDp8R/

<div id="container">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <span class="stretch"></span>
</div>

but I can't seem to get it to work with my code. I'm not putting my attempted code on here, just what I've got after the spacer was put in. That way, whoever wants to work with it won't have to go deleting erroneous code (thought that will probably happen anyways).

Thanks for looking at this and to help with the code, I've put it in a jsfiddle for your reading pleasure.

https://jsfiddle.net/thinktwice84/93tt9uLh/

<body class="contact">
    <header id="header">
        <div id="logo">
            <a href="../Pages/index.html"><img src="../Images/R2.png" alt="Portfolio"/></a>
        </div><!--logo-->
        <div id="header_spacer" content=''></div>
        <div id="navbar"> 
            <ul id="navbar_ul"> 
                <li class="nav"><a href="../Pages/login.html" alt="login" >LOGIN</a></li>
                <li class="nav"><a href="../Pages/contact.html" alt="contact information" >CONTACT</a></li>
                <li class="nav"><a href="../Pages/about.html" alt="about the artist" >ABOUT</a></li>
                <li class="nav"><a href="../Pages/portfolio.html" alt="portfolio" >PORTFOLIO</a>
                    <ul id="portfolio_menu">
                        <li><a href="../Pages/paintings.html" alt="paintings" >PAINTINGS</a></li>
                        <li><a href="../Pages/drawings.html" alt="drawings" >DRAWINGS</a></li>
                        <li><a href="../Pages/cartoons.html" alt="cartoons" >CARTOONS</a></li>
                    </ul><!--portfolio_menu-->
                </li>
            </ul><!--navbar_ul-->
       </div><!--navbar-->
    </header>
</body>
mmgross
  • 3,064
  • 1
  • 23
  • 32
Pat
  • 63
  • 7
  • Alright, so I would like to know how to do this but for now I'm just setting the #navbar div to right: 30px, left: auto, removed the text-align: justify, and set a min-width on the page to 850px. This is somewhat of a fix but does not use a spacer which is really what I want to understand. – Pat May 23 '15 at 05:00
  • As I understand it, you want the fixed width logo aligned left, the dynamically sized navigation aligned right and to stop them wrapping on smaller viewports. Is that correct? – Michael Lawton May 25 '15 at 18:26

0 Answers0