I am using Foundation 5-framework I want to create a navigation with a panel under it. When adding the panel, the navigation bar is always above the panel.
This is my code:
& lt; Div id = "content" & gt; & Lt; Div class = "row" & gt; & Lt; Div class = "grid fixed from" & gt; & Lt; Nav class = "top-bar" data-topbar role = "navigation" & gt; & Lt; Ul class = "title-area" & gt; & Lt; Li class = "name" & gt; & Lt; H1 & gt; & Lt; A href = "#" & gt; Mikeite & lt; / A & gt; & Lt; / H1> & Lt; / Li & gt; & Lt; Li class = "toggle-topbar menu-icon" & gt; & Lt; A href = "#" & gt; & Lt; Span & gt; & Lt; / Span & gt; & Lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; Section class = "top-bar-section" & gt; & Lt; Ul class = "right" & gt; & Lt; Li class = "active" & gt; & Lt; A href = "home.ctp" & gt; Index & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Contact & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; About me & lt; / A & gt; & Lt; / Li & gt; & Lt; Li class = "is dropdown" & gt; & Lt; A href = "#" & gt; Sign up & lt; / A & gt; & Lt; Ul class = "dropdown" & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Sign in & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Section & gt; & Lt; / Neo & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "row" & gt; & Lt; Div square = "small-12 column panel" & gt; & Lt; P & gt; This is a panel. & Lt; / P & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; You can remove the square ("fixed") from your third line (if you do not want to set the top-bar if you don), the second (panel) line (with the same height as the top-bar) Add margin-finishing. When the position of an element is constant (such as full and float) it is not actually on the page that the static element is not its relative. So your panel was to anchor the top of the page, because there was no block above it. I'm simplifying it a bit, but I hope that helps.
No comments:
Post a Comment