I'm currently making my web page responsive. I'm struggling with the nav bar, and don't have an idea on where to start to make it mobile friendly. This is what my nav bar looks like:
HTML:
<head>
<link href="https://fonts.googleapis.com/css?family=Gilda+Display|Montez|Sacramento" rel="stylesheet">
</head>
<nav>
<div class="navcontainer">
<ul>
<li class="right">Shop</li>
<li class="right">Login</li>
<li><img class="logo" src="http://rubyfearless.com/wp-content/uploads/2012/08/style-insider-logo221.jpeg"></li>
<li class="right">Contact us</li>
<li class="right">Blog</li>
</ul>
</div>
</nav>
<div class="clearfix"></div>
CSS:
html, body {
margin: auto;
padding: 0px;
}
.container{
margin: 0 auto;
width: 85%;
}
.clearfix{
clear:both;
}
/*******************************/
/*********************HEADER*******************/
nav {
text-align: center;
width: 100%;
background-color: white;
border:2px solid black;
}
nav ul {
padding: 0;
margin:0;
}
nav li {
color: black;
display: inline-block;
font-size: 30px;
font-weight: 300;
font-family: 'Sacramento', cursive;
vertical-align: middle;
margin: 16px 20px;
}
li a{
text-decoration: none;
color: black;
}
.logo{
height:100px;
}
Here is the codepen code to my nav bar:
https://codepen.io/teenicarus/pen/vZWJxX
This is how I would like it to look like on mobile:
Where do I go from here to create a similar result?
I appreciate all responses.
You need to use #media query to override the css based on screen size... working example as below
html, body {
margin: auto;
padding: 0px;
}
.container{
margin: 0 auto;
width: 85%;
}
.clearfix{
clear:both;
}
/*******************************/
/*********************HEADER*******************/
nav {
text-align: center;
width: 100%;
background-color: white;
border:2px solid black;
}
nav ul {
padding: 0;
margin:0;
}
nav li {
color: black;
display: inline-block;
font-size: 30px;
font-weight: 300;
font-family: 'Sacramento', cursive;
vertical-align: middle;
margin: 16px 20px;
}
li a{
text-decoration: none;
color: black;
}
.logo{
height:100px;
}
.small-screen{display:none;}
#media screen and (max-width: 768px) {
nav li {display:block}
.small-screen{display:block;}
.large-screen{display:none;}
}
<head>
<link href="https://fonts.googleapis.com/css?family=Gilda+Display|Montez|Sacramento" rel="stylesheet">
</head>
<nav>
<div class="navcontainer">
<ul>
<li class="small-screen"><img class="logo" src="http://rubyfearless.com/wp-content/uploads/2012/08/style-insider-logo221.jpeg"></li>
<li class="right">Shop</li>
<li class="right">Login</li>
<li class="large-screen"><img class="logo" src="http://rubyfearless.com/wp-content/uploads/2012/08/style-insider-logo221.jpeg"></li>
<li class="right">Contact us</li>
<li class="right">Blog</li>
</ul>
</div>
</nav>
<div class="clearfix"></div>
For making responsive website, rather than starting from scratch use available frameworks such as Bootstrap.
Bootstrap provides a ready made collapsible navbar, that automatically collapses your navbar for mobile screens and displays a "humburger-icon" toggle drop down menu like you want. The official documentation can be found here : Bootstrap Nav-Bar.
You can also find a working example and a bit more explanation on how to implement bootstrap navigation bars, here: W3Schools Bootstrap Nav-Bar.
To actually implement it in your codepen is a bit of work, and but it is not hard. I think it would do you good to actually implement it yourself. If you have any particular issues while implementing it you can always come back to Stack Overflow. So good luck.
Here are some additional links that may be helpful :
How to add hamburger menu in bootstrap
Bootstrap NavBar with left, center and right aligned items
Related
I would like to change the position of these buttons inside my navbar, also I would like you to tell me if it's correct what I'm doing in my CSS. the main idea is that I wanted to make a navbar, just I wonder to know if it's right how I did it.
Note: About the position of the buttons, as you can see I set 20 px to the margin button(before I set a position relative), but as you can see nothing happen.I would like to move the buttons more to the top.
Another doubt that I've got now, is how do I have to move, the <a> tags or the <li> or both?
Thanks!
body {
background-color: #fcf2e5;
margin: 0;
}
nav {
background-color: #beb8a4;
height: 120px;
}
.menu {
padding-left: 380px;
}
/* Nav Buttons */
.menu li {
display: inline;
font-family: sans-serif;
font-size: 1.2em;
padding-left: 40px;
text-decoration: none;
}
.navButtons {
text-decoration: none;
color: black;
}
.navButtons:hover {
color: #a52929;
}
/*I don't know if it's correct what I'm doing here below*/
ul,
li,
a {
display: inline;
position: relative;
margin-bottom: 20px;
}
/* Logo */
header nav a img {
margin-top: 20px;
margin-left: 22px;
}
<header>
<nav>
<a href="#">
<img src="Images/logo.png" title="Home" alt="Logo" />
</a>
<ul class="menu">
<li>Quienes Somos
</li>
<li>Muestras y Acabados
</li>
<li>Ubicación
</li>
<li>Contáctenos
</li>
</ul>
</nav>
</header>
Most navbars look a little like this these days. Very little markup and a bit of CSS to make it looks nice.
I've used flexbox for positioning. You can position things at the top bottom or centre using this method.
It's also using media queries, this is so it can cope with a small screen (which the snippet will have) press full screen to swap between its states.
body {
background-color: #fcf2e5;
margin: 0;
}
/* Start of navbar */
nav {
background-color: #beb8a4;
display: flex;
padding: 15px 0;
height: 100%;
align-items: center;
justify-content: space-around;
}
/* Nav buttons */
.navButtons {
font-family: sans-serif;
font-size: 1.2em;
text-decoration: none;
color: black;
}
.navButtons:hover {
color: #a52929;
}
/* Small screen support */
#media only screen and (max-width: 640px) {
nav {
flex-direction: column;
}
.navButtons {
text-align: center;
font-size: 1.6em;
max-width: 180px;
margin-top: 10px;
}
}
<nav>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/BBC_America.svg/100px-BBC_America.svg.png" title="Home" alt="Logo" />
About us
Samples and Finishes
Find us
Contact us
</nav>
Hope you find this helpful.
I made a simple webpage with header and navbar, but I came across this little problem that's actually pretty annoying. The links aren't 100% in the middle of the inline list, here's a screenshot:
https://i.gyazo.com/105d8156e667277d0b31f18ba6a3b7db.png
To prevent confusion, the whole page is centered, but the screenshot is just of the navbar part.
The HTML:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link href="css/style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<h1>Test website</h1>
<div id="nav">
<ul>
<li><a class="active" href="#">Home</a></li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
<li>Fifth</li>
</ul>
</div>
</body>
</html>
The CSS file:
/* navigation bar */
#nav {
width: 490px;
margin: auto;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
/* unordered list in navbar */
#nav ul {
text-align: center;
}
/* list items in navbar */
#nav li {
display: inline-block;
}
/* links in items of navbar */
#nav li a {
text-decoration: none;
margin: 20px;
font-family: Arial, sans-serif;
font-weight: bold;
}
/* header 1 */
h1 {
text-align: center;
font-family: Arial, sans-serif;
font-weight: bold;
}
The issue is the default padding that is being applied to the ul, simply zero out the padding:
#nav ul {
text-align: center;
padding:0;
}
JSFiddle
Just remove the padding and margin from the UL:
#nav ul {
text-align: center;
padding: 0;
margin: 0;
}
Above answer is correct, but in ideal scenario <a> should have padding so in future if we want to have a background-color for link, it will occupied entire block.
http://jsfiddle.net/5Lu5qjux/
I have a problem with my nav where it's so wide that it keep giving me extra space to the right. I have no idea why it's so wide, I tried making the with of it smaller with some code, but I'm making the site responsive and when I bring the code down to around 320px it is based on the screen size making the words really hard to see and click. Actually it looks fine on my local computer when I test it, but putting it on a server and actually looking at it on my phone makes it look terrible. Anyone have any problems like this before or can maybe see what I'm doing wrong? JSFiddle
HTML5
<div id="header-banner">
<div class="wrapper">
<header> <a href="index.html">
<img id="logo" alt="PT Logo" src="Images/PT-logo.png"></a>
<nav id="main-nav">
<ul id="nav">
<li>Home
</li>
<li>CityName
</li>
<li>CityName
</li>
</ul>
</nav>
</header>
</div>
</div>
CSS3
/* ===== HEADER NAVIGATION AREA ===== */
#main-nav {
position: relative;
left: 50%;
bottom: 20px;
height: 40px;
background-color: blue;
}
#nav {
list-style: none;
margin: auto;
}
#nav li {
float: left;
display: inline;
}
#nav li a {
color: #DB7093;
display: block;
padding: 3px 15px;
height: 20px;
}
#nav li a:hover {
background-color: #DB7093;
color: #F0F8FF;
text-shadow: none;
}
Try to remove the margin:auto, and edit padding: 3px 15px to padding: 3px 1px, just to see whether this is your porblem.
This might be the solution:
#main-nav {
position: relative;
left: 50%;
width:350px;
bottom: 20px;
height: 40px;
background-color: blue;
}
Add widthproperty to your #main-nav.
JSFiddle Example: http://jsfiddle.net/8K2bL/
/* MOBILE - 649 = logo + nav */
#media only screen and (max-width: 649px) {
#logo{display:block !important;}
#main-nav{
margin:0 auto !important;
bottom:auto !important;
right:auto !important;
}
header{
width:320px !important;
margin:0 auto;
}
}
#logo{
width:auto;
height:100%;
display:inline;
}
header{
height:100px;
width:100%;
position:relative;
}
/* ===== HEADER NAVIGATION AREA ===== */
#main-nav {
float:right;
position:absolute;
bottom:0;
right:0;
}
Try structuring the html better. I updated your js fiddle and restructured the html, added a couple of classes and modified the existing #main-nav. You can find it in this jsfiddle
I would also recommend you to look in to bootstrap for responsive css layouts
I have a very plain navigation menu using an unordered list laid out horizontally using display:inline;. The previews in my HTML editor show the page coming together just fine. However, when it's viewed in Chrome and IE, there's a strange padding on top of the nav menu and only on the top. Using the process of elimination, I know this is a problem with my CSS for the <li> tag but I'm not sure what the problem is.
So far I've tried display:inline-block, lowering the font size, setting the <ul> tag in the nav menu to display:inline, and a myriad other things. None seems to be helping. Any advice for where the CSS went wrong? Here is the HTML in question...
<body>
<div id="wrapper">
<div id="header"></div>
<div id="navigation">
<ul>
<li>welcome</li>
<li>who we are</li>
<li>what we do</li>
<li>contact</li>
</ul>
</div>
<div id="content"> </div>
</div>
</body>
And here is the CSS...
body {
background-color: #000000;
margin: 0;
padding: 0;
font-family: Arial, Helvetica, Sans-Serif;
text-align: center;
}
#header {
background-color: #ffffff;
height: 100px;
}
#wrapper {
width: 960px;
text-align: left;
}
#navigation {
height: 45px;
background-color: #C0C0C0;
font-size: 1.3em;
text-align: right;
}
#navigation a {
color: #00132a;
text-decoration: none;
}
#navigation a:hover {
color: #483D8B;
}
#navigation ul {
padding-top: 10px;
}
#navigation ul li {
display: inline;
list-style-type: none;
padding: 0 30px 0 30px;
}
#navigation-symbol {
font-size: 1em;
}
#content {
background-color: #ffffff;
text-align: left;
font-size: 14px;
}
And for interactive fun there's a jsFiddle as well which shows the exact same phenomenon I'm seeing. Thanks ahead for the advice!
Simply set margin to zero
#navigation ul {
margin: 0;
padding-top: 10px;
}
My test site here is working fine I believe (haven't tested it in all browsers quite yet however my main navigation menu at the top wont center. There is a gap there in the middle because the logo will be going there, but I didn't want it in the way for this test.
Why isn't my navigation centering?
CSS
#main-navigation { width: 100%; height: 70px;font-family: Tahoma, Geneva, sans-serif; text-transform: uppercase; font-size: 1em; letter-spacing: 2px; line-height: 35px; margin: 0 auto;}
#main-navigation ul { width: 289px; list-style: none; }
#main-navigation li { float: left ;margin-left: 12px; }
#main-navigation li a { display: block; text-decoration: none; color: #fff; }
#main-navigation li a:hover { color: #c7bd89; }
#main-nav-left{ list-style: none; float: left; border: 1px solid #6F0; }
#main-nav-right{ list-style: none; float:right; border: 1px solid #6F0; }
header { width: 960px; margin: 0 auto; display: inline-block; /*border: 1px solid #000;*/}
HTML
<header>
<nav id="main-navigation">
<ul id="main-nav-left">
<li class="current">Home</li>
<li>Areas of Practice</li>
</ul>
<!-- <img class="averylogo" src="img/HEADER-AveryLawOffice-LOGO.png" alt="Avery Law Office">-->
<img class="banner" src="img/BANNER1-averylawoffice.jpg" alt="Banner 1">
<ul id="main-nav-right">
<li class="current">Contact</li>
<li>Blog</li>
</ul>
</nav>
</header>
As you see I already have "margin: 0 auto;" in there. So I'm confused as to why it's not working.
This is the site
However if I take out display: inline-block; it works fine but when updated on my local wordpress theme it moves down a lot.
#Quoo: Do you know why this might be happening to it for the CSS is right now. Would this be a question for wordpress.stackexchange?
You want display:block not display:inline-block on your header element.
Hi you can define yout header display:table; as like this
header {
width: 960px;
margin: 0 auto;
display: table;
}
Hi you don't need to add any thing in your header class if need navigation in center so it will with work your margin:auto; & width: 960px; like mentioned below sample:-
header {
width: 960px;
margin: 0 auto;
}
Your navigation will come in center according to above css.....