I have a navigation bar as shown here: http://i.imgur.com/4rxkS2K.jpg
I am using foundation to build a website, the way I have built the nav bar is as follows:
HTML:
<nav class="top-bar">
<ul>
<li>About</li>
<li id="menu-divider">|</li>
<li>Testimonials</li>
<li><img src="images/logo.png" alt=""></li>
<li>Services</li>
<li id="menu-divider">|</li>
<li>Contact</li>
</ul>
</nav>
CSS:
.top-bar { font-family: 'bebas_neueregular';
height: 150px;
line-height: 100px;
padding: 18px;
width: 100%;
position: relative;
text-align:center;
margin-bottom:10px; }
.top-bar ul { display:inline-block;
margin-left: auto ;
margin-right: auto ;}
.top-bar ul > li { display:inline-block;
margin-left: auto ;
margin-right: auto ;}
#menu-divider { color:#ffffff;
font-size: 24px;}
As you can see in the picture, the way I have built it means that my center li element (my logo picture) is not in exact center as the other li elements are of different widths meaning they are all centered collectively. What I'm after is the logo in the dead center then the other li elements as they are centered around the logo.
Thanks in advance for any help!
You can play around but I'm pretty sure this does the trick:
http://codepen.io/anon/pen/dYXQpz
Use 3 containers (that means you lose your nav as a ul). Flex them and inside of the left and right one, flex the elements (end for the first, start for the other)
<div class="nav-bar">
<div class="sideNav leftNav">
<div class="menu">
MENU 1
</div>
<div class="split"></div>
<div class="menu">
MENU 2
</div>
</div>
<div class="logo">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSN9qhGx6NftAepiMOjdGXkcW-UxkO9dtQ4VGRlepyzNC2S8xQCcA" />
</div>
<div class="sideNav rightNav">
<div class="menu">
MENU 3
</div>
<div class="split"></div>
<div class="menu">
MENU 4
</div>
</div>
</div>
Then apply the css. It can be improved but it can help you get started.
.nav-bar {
background: pink;
display: flex;
}
.sideNav {
flex: 1 0 auto;
background: red;
display: flex;
}
.leftNav {
justify-content: flex-end;
}
.rightNav {
justify-content: flex-start;
}
.sideNav > div {
margin: 100px 20px 0 20px;
}
.split{width: 2px;background: white;height: 16px}
Hope that helps. I loves flexbox.
Related
I can't seem to understand how I should center this menu among the logo and the login/register
http://jsfiddle.net/hnnsr97x/2/
HTML
<header id="header">
<div id="LogReg">
<h2>Login | Register</h2>
</div>
<div id="logo">
<a class="logo" href="index.html"><img alt="Logo" title="logo" src="Logo/logo.png" ></a>
</div>
<nav id="menu">
<ul class="main_menu">
<li>MENU1</li>
<li>MENU2</li>
<li>MENU3</li>
</ul>
</nav>
</header>
CSS:
#header {
width:100%;
}
#logo, #menu {
float:left;
}
#menu {
}
#menu li {
display:inline-block;
}
#LogReg {
text-align:right;
}
The fiddle is quite empty because I cleared it from some things I tried
So I'm here to ask for someone to explain how I should get the menu in the center? I'm obviously missing something.
Try this: http://jsfiddle.net/hnnsr97x/6/
the calc(50% - 500px) is saying make the margin-left 50% minus the width of the image and half of the menu
#logo{
float:left;
}
#menu {
float:left;
margin-left: calc(50% - 500px);
}
Do you mean centering the menu like this?
<header id="header">
<div id="LogReg">
<h2>Login | Register</h2>
</div>
<div class="container">
<div id="logo">
<a class="logo" href="index.html">
<img alt="Logo" title="logo" src="Logo/logo.png" >
</a>
</div>
<nav id="menu">
<ul class="main_menu">
<li>MENU1</li>
<li>MENU2</li>
<li>MENU3</li>
</ul>
</nav>
</div>
</header>
CSS style:
#header {
width: 100%;
}
.container {
display: block;
margin: 0 auto;
width: 300px;
}
#logo {
float: left;
}
#menu {
float: right;
}
.main_menu {
margin: 0;
}
#menu li {
display: inline;
}
#LogReg {
text-align: right;
}
http://jsfiddle.net/jonathanzuniga/66xnov5z/embedded/result/
See working demo here Centered Menu
HTML:
<header id="header">
<div id="LogReg">
Login | Register
</div>
<div id="logo">
<a class="logo" href="index.html">LOGO</a>
</div>
<nav id="menu">
<ul>
<li>MENU1</li>
<li>MENU2</li>
<li>MENU3</li>
</ul>
</nav>
</header>
CSS:
#header {
width:100%;
display:block;
position:relative;
}
#LogReg {
float:right;
}
#logo{
position:absolute;
top: 0px;
left:10px;
}
#menu{
display:block;
width:100%;
text-align:center;
overflow:hidden;
}
#menu li {
display:inline;
}
https://jsfiddle.net/AkashPinnaka/0eq1f9az/embedded/result/ I am assuming you are intended to make them align in a line. And obviously you know the height of your logo. Let me assume your logo is of height 40px.
Modify your HTML code to the following code.
<header id="header">
<div id="logo">
<a class="logo" href="index.html"><img alt="Logo" title="logo" src="http://www.planwallpaper.com/static/images/9-credit-1.jpg"></a>
MENU1
MENU2
MENU3
</div>
<div id="LogReg">
Login | Register
</div>
</header>
And CSS code as following
#header {
width:100%;
height: 100px;
}
div#logo{
float: left;
}
div#logo a{
/* line-height: 100px; */
display: table-cell;
vertical-align: middle;
}
div#LogReg{
line-height: 40px;
float: right;
}
img{
height: 40px;
width: 80px; /* just assumed to be 80px wide. Width doesn't matter as long as it is not too long. */
}
I took img height as 40px in css as I assumed.
This aligns logo, navigation menu and login|register in the same line.
If you need Login|Register a bit higher than logo and menu, just reduce the line-height of div#LogoReg to less than 40px.
And if u want some margin on both left and right sides, wrap your whole header content in another div tag as shown below
<header id = "header">
<div id = "header_in">
</div>
</header>
and give the width of div#header_in as 80% or something you like. This gives the margin on both left and right sides of your header.
div#header_in{
width: 80%;
}
Let me know if you want anything different.
The picture below shows what I would like to get.
It is a menu within a container, where the menu may wrap to multiple lines when the window/screen gets too narrow for all menu items to fit in. At the same time I would like the menu to have a background which expands to full screen in width, while expanding in height with the menu when it gets wrapped to multiple lines. Currently I think this is not possible with CSS, but I am also just a CSS amateur. My current solution involves #media queries to set the height of the menu background for resolutions where wrapping appears. This does not take into account that font-size could change, thus making each line of menu higher.
Here is a jsFiddle with a basic setup, which does NOT what I want:
https://jsfiddle.net/n3jmyq2f/3/ (Edited, was not the final version)
Here is the code:
<div class="container">
<div class="menu_wrap">
<div class="menu_bg"></div>
<div class="menu">
<ul>
<li>item 1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
</ul>
</div>
</div>
<div class="content">It's me, Mario!</div>
CSS:
.container {
width:50%;
margin: 0 auto;
background:lightgreen;
height:300px;
}
.menu_bg{
position: absolute;
background: #afafaf;
width: 100%;
left:0;
height:30px;
z-index: -1;
}
ul {
height:30px;
background: #afafaf;
}
li {
display:inline-block;
}
The first option is the simplest.
Stop thinking of the .container as something that must contain everything. It's just a class that can be reused as and when required.
If you take the menu div out of the "container" but put a .container div inside you get the effect you are looking for.
JSfiddle Demo
*,
body {
padding: 0;
margin: 0;
}
.container {
width: 50%;
margin: 0 auto;
background: lightgreen;
}
.menu {
background: #afafaf;
}
ul {
border: 1px solid green;
}
li {
display: inline-block;
}
.content {
height: 300px;
}
<div class="menu">
<div class="container">
<ul>
<li>item 1
</li>
<li>item2
</li>
<li>item3
</li>
<li>item4
</li>
<li>item5
</li>
<li>item6
</li>
</ul>
</div>
</div>
<div class="container">
<div class="content">It's me, Mario!</div>
</div>
2nd Option
Use a pseudo-element
*,
body {
margin: 0;
padding: 0;
}
.container {
width: 50%;
margin: 0 auto;
background: lightgreen;
height: 300px;
}
ul {
background: #afafaf;
position: relative;
border: 1px solid green;
}
ul:before {
content: '';
position: absolute;
height: 100%;
background: inherit;
width: 100vw;
left: 50%;
transform: translateX(-50%);
z-index: -1
}
li {
display: inline-block;
}
<div class="container">
<div class="menu">
<ul>
<li>item 1
</li>
<li>item2
</li>
<li>item3
</li>
<li>item4
</li>
<li>item5
</li>
<li>item6
</li>
</ul>
</div>
<div class="content">It's me, Mario!</div>
</div>
JSfiddle Demo
if in .container you change
width:50%;
to
width:100%;
it will do it
fiddle
you could also use the .menu-wrap class (which I've seen in your markup) to do this
I am trying to get an image to float beside of an unordered list.
I have the following HTML:
<header id="header">
<div class="container">
<div class="row">
<div class="col-md-1"><img id="droid-logo" alt="" src="/templates/notthedroidyouarelookingfor/images/ntdyalf-logo.png"></div>
<div class="col-md-2"><ul class="nav menu nav-pills">
<li class="item-101 current active">Home</li>
<li class="item-102">About</li>
<li class="item-106">Contact Us</li>
<li class="item-114">Troubleshooting</li></ul>
</div>
</div>
</div>
</header>
And my CSS:
droid-logo {
float: left;
height: 20%;
margin: 10px;
width: 20%; }
header ul.menu {
border-radius: 4px 4px 0 0;
display: block;
float: right;
margin: 0 10px;
padding: 0;
text-align: left;
width: 70%; }
The actual website is here:
http://notthedroidyouarelookingfor.com/
I don't understand why the image is below the menu.
the <ul class="nav menu nav-pills"> has the css property position: absolute;.
This prevents the menu to float.
Try to make the position relative and then try again with float (maybe you have to float the menu left).
I'm trying to make the header and footer background to be 100% but all the content in the page to be 1200px and centre the page.
So far I put width:1200px in the html, body sure that centre the page but it fixed width the background which I don't want to happen.
Also I've been trying to fix the navigation as well to be positioned on the right and align to the logo.
html,body{
background: #fff;
width: 1200px;
}
.container{
min-height: 100%;
margin: 0 auto;
}
header{
background: #363636;
color: #fff;
padding: 30px;
margin: 0 auto;
}
.logo{
float: left;
clear: both;
display: block;
}
nav{
float: right;
}
<div class="container">
<header clas="main_header">
<div class="logo">
<h2>LOGO.COM</h2>
</div>
<div class="clearfix"></div>
<nav class="main_nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Testimonials</li>
<li>Contact Us</li>
<li>Get a Quote</li>
</ul>
</nav>
</header>
.....
</div>
Don't restrict the width of the HTML or body...restrict the width of the container.
html,body{
background: #fff;
}
.container{
width: 1200px;
margin: 0 auto;
}
If an element needs to be wider than the container just close one .container add your wider element and open a new .container.
Codepen Demo
On this page, I have a footer menu #menu-footer-menu; "About - Select Your City - How Walks Work..." generated by Wordpress.
<div class="menu-footer-menu-container">
<ul id="menu-footer-menu" class="menu">
<li id="menu-item-143">About</li>
<li id="menu-item-151">Select Your City</li>
<li id="menu-item-162">How Walks Work</li>
<li id="menu-item-160">FAQs</li>
<li id="menu-item-166">Blog</li>
<li id="menu-item-153">Partners</li>
<li id="menu-item-154">Press</li>
<li id="menu-item-144">Privacy Policy</li>
<li id="menu-item-145">Site Map</li>
<li id="menu-item-146">Terms & Conditions</li>
</ul>
</div>
I want to center this menu.
I tried the following CSS but it didn't work:
div.menu-footer-menu-container {text-align:center;}
ul#menu-footer-menu.menu {
list-style-type: none;
width: 760px !important;
margin: 0 auto !important;
display: inline-block !important;
}
ul#menu-footer-menu li {
display: inline-block !important;
margin-right: 14px;
margin-right: 1rem;
}
Use following css instead of what you have.
I just changed display for ul#menu-footer-menu.menu to block nothing else.
div.menu-footer-menu-container {text-align:center;}
ul#menu-footer-menu.menu {
list-style-type: none;
width: 760px !important;
margin: 0 auto !important;
display: block !important;
}
ul#menu-footer-menu li {
display: inline-block !important;
margin-right: 14px;
margin-right: 1rem;
}
You need to add one wrapper element with a width of 100% to center your div in.
Like:
<div class="wrapper">
<div class="menu-footer-menu-container">
...
</div>
.wrapper{ width:100% }
Use display:block instead of inline-block
ul#menu-footer-menu.menu {
list-style-type: none;
width: 760px !important;
margin: 0 auto !important;
display: block !important;
}
Try to add CSS Style :
.menu-footer-menu-container
{
text-align: center;
}
You have two ways to do it
width degradation center tag
<center>
<ul>
...
</ul>
</center>
Create another div to force the center
.center { margin: auto; text-align: center; }
<div class="center">
<ul>
...
</ul>
</div>
Note: The tag must be inline-block.
width text-align:center;
ul{ text-align: center; }
<center>
<ul>
...
</ul>
</center>
Add one more style text-align:center to #footer-menu in css.