Hi, I need some help getting my header and nav to be in the same line. I want something similar to http://www.worldwildlife.org/ with the nav on the right and the logo on the left.
My site is http://bridgetofaithww.org/index3.html
Thanks!
You could start by adding a text-align: right to the section.top-bar-section. You should then remove the left classes from the ULs since that class assigns a float: left !important. A display: inline-block is needed on .top-bar-section ul, and a display: block to .top-bar-section ul ul. These changes move the menus to the right, but how to align the menu vertically to the logo depends and a number of things: will the ul.title-area have content at some point? The logo will always have this height? You could use flexbox, or display: table, and it depends on what is the oldest browser you need to support.
I would go with display: table for the nav.top-bar, then wrap the logo in a div with display: table-cell and vertical-align: middle, and another table-cell around ul.title-area and section.top-bar-section.
A quick fix would be to do something like this:
.top-bar-section{float:right;margin:2.3em 0 0}
However the suggestions made by PVgr above would be better to make this automatic and use display:table-cell to get the automatic alignment of content. (You can’t automatically align floats as floats are removed from the flow and won’t align with anything automatically.)
You will still need to control the smaller screen sizes with media queries or re-arrange content when the nav breaks to the next line.
Thanks for your reply! However I have a few questions. When I add text-align: right to the section .top-bar-section then my text of the dropdowns moves to the right. Is it supposed to do that? Would I want to change the left classes to right or just remove them all together? And where are the .top-bar-section ul and .top-bar-section ul ul? I am new at this so thanks for all your help!
You are right, the text of the dropdown menus will align right and need to be assigned a text-align: left, I should have noted that. You can apply the text-align on .top-bar-section ul.
The left classes should be removed, otherwise you must apply a float: none !important, which should be avoided most of the time.
The .top-bar-section ul selector is in foundation.min.css and you should overwrite it in a different style sheet that should be loaded after the foundation file — you do have a different stylesheet, don’t you? 
The .top-bar-section ul ul selector should be added to the same file.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.