HTML&CSS Strategy for header navigation -

need input on how best implement navigation in html & css fluid when user resizes screen 1200 lets 786px example , navigation options don't cram - break hamburger situation. have psd file layered out , all.

my 2 ideas:

1. i'm thinking positioning navigation @ position , creating link areas on navigation options

2. making big logo gets smaller , moves while navigation moves inward while user make screen smaller

any ideas out there situation.

i don't understand why first idea. second idea accomplished , in getting menu fit on 1 line browser window widths of 786px , higher.

off bat see might have issues stylized border. fixed width graphics , fluid responsive design don't totally play together. you'll want create set of menu border graphics 2 breakpoints, 1 786px wide , , 1 looks 1200px wide. perhaps 1 burger menu well. if you're okay sacrificing of design, create horizontally repeating tile graphic or css3 gradient borders - otherwise you'll have fixed width menus set of graphics each breakpoint - not ideal. though, can think of trick can fix using clip-path restrict width of border elements different breakpoints might want use, using same set of images then.

anyway, you'd adjust size of menu items down mid-sized menu , you've mentioned reduce size of logo, move up, , remove space in list of links in middle. how go doing last part depends on html structure links.

i'm doing menu similar yours project , have below markup:

    <header id="header">         <div class="container">             <div class="nav-toggle">                 <div class="hamburger">                     <div class="bar"></div>                     <div class="bar"></div>                     <div class="bar"></div>                 </div>             </div>             <div id="logo">                 <a href="#"><img src="assets/img/logo.png" alt="" class="logo"></a>             </div>             <nav>                 <ul class="list-inline">                     <li class="current-menu-item"><a href="#">home</a></li><!--                     --><li><a href="#">restaurant</a></li><!--                     --><li><a href="#">menu</a></li><!--                     --><li><a href="#">gallery</a></li><!--                     --><li><a href="#">catering</a></li><!--                     --><li><a href="#">contact</a></li>                 </ul>             </nav>         </div>     </header> 

i position logo absolutely using new go-to centering trick:

#logo {     position: absolute;     top: 10px;     left: 50%;     transform: translatex(-50%);     z-index: 999; } 

i have 1 menu breakpoint around 960px below hamburger menu. here sass/scss that:

@media screen , (min-width: $nav-breakpoint) {     .list-inline {         margin-left: -10px;          li {             display: inline-block;              &:nth-child(3) {                 margin-right: 180px;             }         }          {             padding-left: 15px;             padding-right: 15px;         }     } } 

my strategy creating space in middle logo sits apply margin-right nth-child before logo. if foresee number of menu items never change work well.

in experience can go smaller in size of menu links might think devices in 768px 1024px width, , it's better have smaller links spaced wider apart bigger links crammed, making sure you're apply padding a tag rather li increase size of "hit" area.

let me know in comments if you'd further exposition on i've suggested.