I'm trying to create a website using flexbox for the header. However, it breaks on mobile devices so I wanted to know if there was a way to make the 3 links on the right (look at the code to understand) collapse into a burger-menu style dropdown if the width of the browser means it wouldn't all fit on one row.
Code
Codepen Link
HTML
<header>
<!--Random placeholder logo-->
<img id="logo" src="https://www.goomlandscapes.co.nz/wp-content/uploads/2018/08/logo-placeholder.png" alt="Logo" />
<nav class="nav_links">
<li>About Me</li>
<li>Projects</li>
<li>Contact</li>
</nav>
</header>
CSS
#import url("https://fonts.googleapis.com/css2?family=Montserrat:wght#500&display=swap");
* {
font-family: "Montserrat", sans-serif;
box-sizing: border-box;
margin: 0;
padding: 0;
background-color: #24252a;
color: #edf0f1;
}
li, a, button {
font-weight: 500;
font-size: 16px;
text-decoration: none;
}
header {
display: flex;
justify-content: flex-end;
align-items: center;
padding: 25px 7%;
padding-bottom: 27px;
}
#logo {
height: 36px;
width: auto;
cursor: pointer;
margin-right: auto;
}
.nav_links {
list-style: none;
}
.nav_links li {
display: inline-block;
padding: 0 20px;
}
You can use a media query to specify at what browser width you want your menu to turn into hamburger style. Proper syntax looks like this:
#media screen and (max-width: 768px) {
nav {
some-property: value;
}
}
This will alter the way your nav element is styled whenever the browser width becomes smaller than 768px.
Related
I have 2 big questions and I will be thankfull if you could please answer Thank you ( I am noew into programming): 1) I don`t know how to change my text so it can fit every screen(iphone ipad laptop...) 2) And how can I move the elements English, French ... to the right (my languages) so that it stays in the same horizontal line.
thanks
.code {
overflow: auto;
}
.logo {
float: left;
}
/* ~~ Top Navigation Bar ~~ */
#navigation-container {
width: 1200px;
margin: 0 auto;
height: 70px;
position: fixed;
background-color: white;
opacity: 0.8;
padding-bottom: 10px;
padding-top: 0px;
margin-top: 0px;
}
.navigation-bar {
height: 70px;
width: 111%;
}
#navigation-container img {
float: left;
height: 111%;
}
#navigation-container ul {
padding: auto;
margin: auto;
text-align: center;
display: block;
}
#navigation-container li {
list-style-type: none;
padding: 0px;
height: 24px;
margin-top: 4px;
margin-bottom: 4px;
display: inline;
}
#navigation-container li a {
color: black;
font-size: 16px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
text-decoration: none;
line-height: 70px;
padding: 5px 15px;
opacity: 0.7;
}
#menu {
float: center;
}
a:hover {
background-color: #0099cc;
}
hr {
color: darkgray;
}
<!DOCTYPE html>
<html>
<head>
<title>Welcome </title>
<link rel="stylesheet" href="text.css" type="text/css">
<meta charset="UTF-8">
</head>
<body>
<div class="navigation-bar">
<div id="navigation-container">
<img src="Bildschirmfoto%202017-10-08%20um%2012.01.55.png">
<ul>
<li>Home</li>
<li>Who are we ?</li>
<li>Newest</li>
<li>The Best</li>
<li>English</li>
<li>Deutsch</li>
<li>Français</li>
</ul>
<hr >
</div>
</div>
</body>
</html>
You can make this work with minimal changes as long as you want the desktop nav layout on mobile.
https://codepen.io/will0220/pen/YrabEm
You'll want to change the nav bar and nav bar wrapper to be 100% width - you can add a max-width if you don't want it to exceed a specific size. From there, add a media query for smaller devices that kicks off at a smaller size (1000px in my example but it can be lower) and switch to viewport units for the font size/padding of the nav elements. This is only if you want the full desktop nav on mobile - it's probably better to look for an alternate mobile menu for usability, but this will at least make it fit as-is.
#media (max-width: 1000px){
#navigation-container li a{
font-size: 3vw;
padding: 5px 1vw
}
}
I am working on my first portfolio and running into some trouble doing two things.
Creating a fixed navbar. When I use position: fixed; it clears my float on the right "Contact Me", and everything collapses. I need this to stay spaced how it is in my example. Searched for quite some hours and I cannot find a fix as of yet, although I am a novice so I am sure that plays into this some as well.
For my landing page photo, I am trying to make a responsive design that allows it to resize to 100% of the available page size. I had implemented this with height: 100vh; however quickly noticed that it is taking the 100vh, and implementing this after my navbar, which leaves excess below. I tried to compensate by reducing the vh to account for the navbar, but of course I realized that this would not be a good fixed as it would only work for that viewport height, and not scale accordingly.
This leaves me either needing a fix to scale the content appropriately, or allow the photo to slide under the navbar, and occupy that space as well so that it is touching the top of the page.
Relevant HTML:
<header>
<div class="navbar">
<ul>
<li>Home</li>
<li>About Me</li>
<li>My Work</li>
<li style="float:right">Contact Me</li>
</ul>
</div>
</header>
<main>
<section class="homeLanding">
<h1>Hi, I'm Michael.</h1>
<p>A Front-End Web Dev</p>
<a href="#aboutMe" class="myBtn">Start here to learn more about me,
<br>and how I can help you</a>
</section>
Relevant CSS:
body {
margin: 0;
}
/** style navbar **/
.navbar ul {
background-color: #333;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden
}
.navbar li {
float: left;
}
.navbar li a {
display: block;
text-align: center;
text-decoration: none;
color: white;
padding: 14px 16px;
}
.navbar li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
/** style landing page **/
.homeLanding {
height: 100vh;
width: 100%;
margin: auto;
background: url(/**Insert Image**/);
display: flex;
background-size: cover;
background-position: center;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
top: 0;
}
.myBtn {
color: white;
text-decoration: none;
border: solid 3px white;
border-radius: 6px;
padding: 7px 7px 0px 7px;
}
p, h1 {
color: white;
}
Background image: http://res.cloudinary.com/dtgbwo6mf/image/upload/v1502053498/bg_b0vucn.jpg
Point 1
In order to have position: fixed on your navbar without losing its layout, all you need to do is make sure to apply width: 100% as well.
Point 2
What you're looking for is to make use of CSS's calculation-driven values.
This way, you can tell you body to occupy 100% of the vertical height minus the height of your navbar, with height: calc(100v - 46px).
Here's a complete sample:
body {
margin: 0;
}
/** style navbar **/
.navbar {
position: fixed;
width: 100%;
}
.navbar ul {
background-color: #333;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden
}
.navbar li {
float: left;
}
.navbar li a {
display: block;
text-align: center;
text-decoration: none;
color: white;
padding: 14px 16px;
}
.navbar li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
/** style landing page **/
.homeLanding {
padding-top: 46px;
height: calc(100vh - 46px);
width: 100%;
margin: auto;
background: url('http://res.cloudinary.com/dtgbwo6mf/image/upload/v1502053498/bg_b0vucn.jpg');
display: flex;
background-size: cover;
background-position: center;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
top: 0;
}
.myBtn {
color: white;
text-decoration: none;
border: solid 3px white;
border-radius: 6px;
padding: 7px 7px 0px 7px;
}
p,
h1 {
color: white;
}
<header>
<div class="navbar">
<ul>
<li>Home</li>
<li>About Me</li>
<li>My Work</li>
<li style="float:right">Contact Me</li>
</ul>
</div>
</header>
<main>
<section class="homeLanding">
<h1>Hi, I'm Michael.</h1>
<p>A Front-End Web Dev</p>
<a href="#aboutMe" class="myBtn">Start here to learn more about me,
<br>and how I can help you</a>
</section>
<section class="homeLanding">
<h1>SAMPLE EXTRA PADDING</h1>
<p>SAMPLE EXTRA PADDING</p>
<a href="#aboutMe" class="myBtn">SAMPLE EXTRA PADDING
<br>SAMPLE EXTRA PADDING</a>
</section>
Note that I added a second <section> to the HTML to demonstrate the scrolling effect with the fixed navbar.
Hope this helps! :)
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
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 am creating a website using a mobile-first approach. I am currently styling the navigation bar, which is comprised of a ul with five li elements and an a element within each li. For the mobile layout, I want the navigation to be perfectly centered. The nav element and the li elements appear to be perfectly centered; however, the a elements are not centered within each li... They are skewed toward the right. How can I correct this?
Here is my HTML:
<nav>
<ul>
<li>Home</li>
<li>Programs</li>
<li>About Us</li>
<li>Why</li>
<li>Contact Us</li>
</ul>
</nav>
And here is my CSS:
nav {
width: 15%;
margin: 0 auto;
padding-top: 0.5em;
}
nav ul {
list-style-type: none;
}
nav li {
max-width: 100%;
margin: 1em;
text-align: center;
border-radius: 10px;
}
nav a {
display: inline-block;
width: 100%;
margin: 0 auto;
padding: 0.5em;
color: inherit;
text-decoration: none;
}
And here is an image of what the nav currently looks like in the browser (Chrome):
Set the li's margin and padding to 0;
Add the following inline or in an external style sheet to nav a
margin: 0px;
text-align: center;
Try this :
nav ul {
display: block;
overflow: hidden;
padding: 0px;
list-style-type: none;
}
nav a {
display: block;
width: 100%;
margin: 0 auto;
color: inherit;
text-decoration: none;
overflow: hidden;
}
And use max-width on the tag not simple width