Making a navigation bar.
On large screens, everything looks like I need.
The problem with small screens.
When a screen decreases, Flex children should be clinging to the left edge. But this does not happen. They are centered.
This is how it looks like on my screen:
I need it to look like this:
Media requests and other use cannot be used. Task condition: only flexs and nothing more.
So how can I get the same effect as in the picture?
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
.footer {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
background: black;
font-weight: bold;
padding: 8px 8px;
}
.footer-name {
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
.footer-nav-item {
margin-left: 10px;
}
.footer-nav-item:hover {
border-bottom: 2px white dashed;
}
.footer-button {
font-size: 7px;
background: inherit;
border: 1px solid white;
padding: 7px 7px;
font-weight: bold;
border-radius: 4px;
}
.footer-button:hover {
background: white;
color: black;
}
.white {
color: white;
}
.footer-margin {
margin: 8px 8px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./assets/css/reset.css" />
<link rel="stylesheet" href="./assets/css/styles.css" />
<title>Flex navigation</title>
</head>
<body>
<footer class="footer">
<a class="footer-name footer-margin white" href="#">Rio Coffee</a>
<nav class="footer-nav footer-margin">
<a class="footer-nav-item white" href="#">HOME</a>
<a class="footer-nav-item white" href="#">ABOUT</a>
<a class="footer-nav-item white" href="#">SERVICES</a>
<a class="footer-nav-item white" href="#">MENU</a>
</nav>
<button class="footer-button footer-margin white">CONTACT</button>
</footer>
</body>
</html>
I think the closest you will get if you are not allowed to use media queries is to use space-between instead of space-around.
The difference is that the free space is distributed between elements only, not including the left and right extreme sides:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
.footer {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
background: black;
font-weight: bold;
padding: 8px 8px;
}
.footer-name {
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
.footer-nav-item {
margin-left: 10px;
}
.footer-nav-item:hover {
border-bottom: 2px white dashed;
}
.footer-button {
font-size: 7px;
background: inherit;
border: 1px solid white;
padding: 7px 7px;
font-weight: bold;
border-radius: 4px;
}
.footer-button:hover {
background: white;
color: black;
}
.white {
color: white;
}
.footer-margin {
margin: 8px 8px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./assets/css/reset.css" />
<link rel="stylesheet" href="./assets/css/styles.css" />
<title>Flex navigation</title>
</head>
<body>
<footer class="footer">
<a class="footer-name footer-margin white" href="#">Rio Coffee</a>
<nav class="footer-nav footer-margin">
<a class="footer-nav-item white" href="#">HOME</a>
<a class="footer-nav-item white" href="#">ABOUT</a>
<a class="footer-nav-item white" href="#">SERVICES</a>
<a class="footer-nav-item white" href="#">MENU</a>
</nav>
<button class="footer-button footer-margin white">CONTACT</button>
</footer>
</body>
</html>
The way I would combat this is:
Try using mobile first. This means your putting your css for mobile and then adding desktop on top of the mobile styling. If you're unsure about this, look at media queries in CSS (https://www.w3schools.com/css/css3_mediaqueries.asp)
By default display: flex; will wrap content (if it exceeds the limit, it will go onto a new line) and will use row as the default direction
If you remove the justify-content: space-around and change it for justify-content: flex-start; it will all be left aligned (flex-end will right align) so you could do a media query for this.
All i've done is added a desktop/tablet breakpoint using a media query and set the .footer's justify-content to flex-start
Hope this helps explain a little more :)
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
.footer {
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
background: black;
font-weight: bold;
padding: 8px 8px;
}
.footer-name {
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
.footer-nav-item {
margin-left: 10px;
}
.footer-nav-item:hover {
border-bottom: 2px white dashed;
}
.footer-button {
font-size: 7px;
background: inherit;
border: 1px solid white;
padding: 7px 7px;
font-weight: bold;
border-radius: 4px;
}
.footer-button:hover {
background: white;
color: black;
}
.white {
color: white;
}
.footer-margin {
margin: 8px 8px;
}
/* Desktop styling! */
#media screen and (min-width: 480px) {
.footer { justify-content: space-around; }
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./assets/css/reset.css" />
<link rel="stylesheet" href="./assets/css/styles.css" />
<title>Flex navigation</title>
</head>
<body>
<footer class="footer">
<a class="footer-name footer-margin white" href="#">Rio Coffee</a>
<nav class="footer-nav footer-margin">
<a class="footer-nav-item white" href="#">HOME</a>
<a class="footer-nav-item white" href="#">ABOUT</a>
<a class="footer-nav-item white" href="#">SERVICES</a>
<a class="footer-nav-item white" href="#">MENU</a>
</nav>
<button class="footer-button footer-margin white">CONTACT</button>
</footer>
</body>
</html>
Related
I'm trying to make a decent navigation bar filled with a logo image however the text refuses to utilize any vertical height and I need the text-box to utilize 100% of it's vertical height
As you can see in the image, the textbox is only clickable within that border and it isn't using any vertical height which I want it to use
#import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
.navigation-bar {
padding: 3px;
display: flex;
justify-content: space-around;
align-items: center;
background-color: #e31f1f;
}
.navigation-item {
height: 100%
margin: 5px;
border: 1px solid #4848b9;
flex: 1 1 35em;
font-size: 15px;
font-family: "Montserrat", sans-serif;
text-decoration: none;
color: #000000;
}
.navigation-item a {
overflow: hidden;
float: none;
}
.navigation-item a:hover {
}
.current-item {
}
.logo {
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>heading</title>
<link rel="stylesheet" href="main.css" />
</head>
<body>
<div class="navigation-bar">
<div><a class="current-item navigation-item" href="home.html">Home</a></div>
<div><a class="navigation-item" href="contact-us.html">Contact Us</a></div>
<div><img src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png" height=128 alt="logo" class="logo navigation-item" /></div>
<div><a class="navigation-item" href="about-us.html">About Us</a></div>
<div><a class="navigation-item" href="gallery.html">Gallery</a></div>
</div>
</body>
</html>
You can use grid for your container to make the row occupy exactly 1fr. After that just add flexbox to your div's that are directly below your parent container to enable flex-grow on your navigation-item or <a> tags. After that it's just a matter of centering the text vertically and horizontally inside the navigation-item. See the snippet below, if it's what's you're looking for.
#import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
.navigation-bar {
padding: 3px;
display: grid;
grid-template-rows: 1fr;
grid-template-columns: repeat(5, 1fr);
background-color: #e31f1f;
}
.navigation-item {
border: 1px solid #4848b9;
flex: 1;
display: flex;
justify-content: center;
align-items: center;
font-size: 15px;
font-family: "Montserrat", sans-serif;
text-decoration: none;
color: #000000;
}
.navigation-bar > div{
display: flex;
justify-content: center;
text-align: center;
}
.navigation-item a:hover {}
.current-item {}
.logo {}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>heading</title>
<link rel="stylesheet" href="main.css" />
</head>
<body>
<div class="navigation-bar">
<div><a class="current-item navigation-item" href="home.html">Home</a></div>
<div><a class="navigation-item" href="contact-us.html">Contact Us</a></div>
<div><img src="https://www.w3.org/html/logo/downloads/HTML5_Logo_256.png" height=128 alt="logo" class="logo navigation-item" /></div>
<div><a class="navigation-item" href="about-us.html">About Us</a></div>
<div><a class="navigation-item" href="gallery.html">Gallery</a></div>
</div>
</body>
</html>
I'm having some trouble with the width of the li elements and the size of my text.
I'm using text-size-adjust to make text readable on mobile, the li height grows with the text but not the width, it stays at the text original size. So the texts overlap.
* { text-size-adjust: 200%; }
#navigation{
background-color: white;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25)
}
#navigation ul{
display: flex;
}
#navigation a{
color: black;
text-decoration: none;
font-size: 25px;
}
#navigation a:visited{
color: black;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>BASE</title>
<link rel="stylesheet" href="../styles/backgradient.css" />
<link rel="stylesheet" href="../styles/base.css" />
<link rel="stylesheet" href="../styles/navigation.css" />
</head>
<body>
<nav id="navigation">
<ul>
<li>Projets</li>
<li>Réseaux</li>
</ul>
<a>変態 白雪</a>
</nav>
<div id="content">
</div>
</body>
</html>
since you have an issue with the text not being adjusted with the screensize, first you have to remove the font size defined within the class, then add the font size to * {} class by defining the size with vw (viewport width). That way the text size will follow the size of the browser window. Try the following example and see. For more information please check w3 documentation. https://www.w3schools.com/howto/howto_css_responsive_text.asp
* {
font-size-adjust: 200%;
font-size:4.5vw;
}
#navigation {
background-color: white;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25)
}
#navigation ul {
display: flex;
}
#navigation a {
color: black;
text-decoration: none;
}
#navigation a:visited {
color: black;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>BASE</title>
<link rel="stylesheet" href="../styles/backgradient.css" />
<link rel="stylesheet" href="../styles/base.css" />
<link rel="stylesheet" href="../styles/navigation.css" />
</head>
<body>
<nav id="navigation">
<ul>
<li>Projets</li>
<li>Réseaux</li>
</ul>
<a>変態 白雪</a>
</nav>
<div id="content">
</div>
</body>
</html>
I'm writing a simple code to design a plain header with a logo and navigation menu inside it. I want my logo to be on left and navigation menu to be on right side. It looks like a child problem but I am unable to resolve this issue.
I have tried to make all possible tweaking in my IDE as well as Chrome Inspection but couldn't figure it out.
My Index.html code is :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>PSD to Page</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Poppins:100,100i,200,400" rel="stylesheet">
<script type="text/javascript" src="js/respond.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- body content -->
<header class="secondary-sky-blue-bg">
<div class="container">
<div class="row">
<a href="#" class="logo">
<img src="img/logo.png" alt="logo" />
</a>
<nav>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Services</li>
<li>Blog</li>
<li>Contact Us</li>
</ul>
</nav>
</div>
</div>
</header>
<!-- javascript -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
and style.css is
header {
color: #fff;
height: 100px;
line-height: 100px;
}
header a.logo{
float: left;
margin-right:10px;
}
.menu {
float: right;
}
.logo img {
width: 100px;
}
body {
font-size: 16px;
line-height: 22px;
font-family: 'Poppins', sans-serif;
}
header nav ul li {
padding-left: 20px;
}
header nav ul li a {
color: #fff;
}
I have a reset.css also
*{
margin: 0;
padding: 0;
}
body{
font-family: 'Raleway', sans-serif;
font-size: 14px;
font-weight: 400;
color: #777;
}
h1
{
font-size: 36px;
color: #555;
font-weight: bold;
}
h2
{
font-size: 30px;
color: #555;
font-weight: bold;
}
h3
{
font-size: 24px;
color: #333;
font-weight: bold;
}
.primary{
color: #e74c3c;
}
.primary-bg{
background-color: #e74c3c;
}
.secondary-dark-blue
{
color: #34495e;
}
.secondary-dark-blue-bg
{
background-color: #34495e;
}
.secondary-sky-blue
{
color: #2d82d8;
}
.secondary-sky-blue-bg
{
background-color: #2d82d8;
}
ul{
list-style: none;
}
ul li {
display: inline-block;
}
I am expecting the nav menu to float on right but it is not working.
You don't have a menu class defined. Are you trying to use nav if so it should be
nav {float:right;}
I can see in your code that you are defining class .menu in your css but you are not using it anywhere in your html.
And you can do it in better way by using flexbox.
.row{
display: flex;
justify-content: between;
}
It not that much heard as i have review your code you have to add simple one class to your nav tag and that is nav class="pull-right" use class pull-right, it is default bootstrap class.
I am here to answer my own question. I found this piece of code in default bootstrap file
.row {
display: flex;}
I changed it to display:block and it is solved.
I respect all the answers but if you using Bootstrap 4 just give ml-auto class to nav it will solve the issue.
You must use col-md-12 inside the row. I have used flex property for nav and margin-left:auto to align the menu right side.
Optionally you can use floating method with clearfix to align the menu right side.
* {
box-sizing: border-box;
position: relative;
}
header {
color: #fff;
height: 100px;
line-height: 100px;
padding: 0 10px;
}
header a.logo {
display: inline-block;
}
.menu {
float: right;
}
.logo img {
width: 100px;
}
body {
font-size: 16px;
line-height: 22px;
font-family: 'Poppins', sans-serif;
}
header nav ul li {
padding-left: 20px;
}
header nav ul li a {
color: #fff;
}
/** second css **/
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Raleway', sans-serif;
font-size: 14px;
font-weight: 400;
color: #777;
}
h1 {
font-size: 36px;
color: #555;
font-weight: bold;
}
h2 {
font-size: 30px;
color: #555;
font-weight: bold;
}
h3 {
font-size: 24px;
color: #333;
font-weight: bold;
}
.primary {
color: #e74c3c;
}
.primary-bg {
background-color: #e74c3c;
}
.secondary-dark-blue {
color: #34495e;
}
.secondary-dark-blue-bg {
background-color: #34495e;
}
.secondary-sky-blue {
color: #2d82d8;
}
.secondary-sky-blue-bg {
background-color: #2d82d8;
}
ul {
list-style: none;
}
ul li {
display: inline-block;
}
.nav-wrapper {
margin-left: auto;
}
nav {
display: flex !important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Poppins:100,100i,200,400" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" >
<header class="secondary-sky-blue-bg">
<div class="container">
<div class="row">
<div class="col-md-12">
<nav>
<a href="#" class="logo">
<img src="https://via.placeholder.com/250x150" alt="logo" />
</a>
<div class="nav-wrapper">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Services</li>
<li>Blog</li>
<li>Contact Us</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</header>
Either
.row {
display: block;
justify-content: between;
}
in your reset.css or style.css
or
<nav class="ml-auto">
in your index.html will work fine.
the css dropdown is a variation of the one found at:
http://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_navbar
When placed inside a dijit.layout.ContentPane, instead of floating, a scroll bar appears.
I've tracked the bug to this file:
<link rel="stylesheet" href="http://js.arcgis.com/3.13/dijit/themes/claro/claro.css">
But i fail to see the cause.
Below, the code.
<!-- File: css/dropdown.css-->
ul.dbtul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li.dbtli {
float: left;
}
li.dbtli a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li.dbtli a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<link rel="stylesheet" href="http://js.arcgis.com/3.13/dijit/themes/claro/claro.css">
<style type="text/css">
html, body { height: 100%; }
</style>
<link rel="stylesheet" type="text/css" href="css/dropdown.css"/>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.11.2/dojo/dojo.js"></script>
<script>
var dojoConfig = {
parseOnLoad: true
}
require([
'dijit/layout/BorderContainer', 'dijit/layout/ContentPane', "dojo/parser", "dojo/domReady!" ],
function(BorderContainer, ContentPane, parser) {
parser.parse();
});
</script>
</head>
<body class="claro" style="font-family: Verdana; font-size: 11px;" >
<div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline',gutters:false" style="width:100%; height:100%;">
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'">
<a id="linkDeRegreso" style="display:none;" href="#" class="controlesVolver"> << Volver a página anterior</a>
<div >
<ul class="dbtul">
<li class="dbtli"><a class="active" href="#home">Home</a></li>
<li class="dbtli">News</li>
<li class="dropdown">
123456
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
This is a result of the BorderContainer layout, which sets a fixed height for the ContentPane div. This div has the dijitContentPane class and claro.css has the following declarations for it:
.dijitContentPane {
display: block;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
You can override overflow to visible and your example will work but then you may run into layout problems when you add other elements to the container. I would suggest to just use a dijit MenuBar instead: https://dojotoolkit.org/reference-guide/1.10/dijit/MenuBar.html
Have a bit of a issue with a h1 not staying in its containing div, the odd thing is its stays in it until the h1 gets to a certain font size then it starts going outside of the div and overlapping into other content. Here is my html and css, also i am also using the eric meyer reset sheet and my font style sheet just contains my #font-face font styles since i am using a custom font:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<title>Lawrence Chabela - User Interface Design</title>
<!-- CSS -->
<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen" charset="utf-8">
<link rel="stylesheet" href="css/font.css" type="text/css" media="screen" charset="utf-8">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" charset="utf-8">
<!--[if IE 6]>
<link rel="stylesheet" href="/css/ie6.css" type="text/css" media="screen" charset="utf-8">
<![ endif]-->
<!--[if IE 7]>
<link rel="stylesheet" href="/css/ie7.css" type="text/css" media="screen" charset="utf-8">
<![ endif]-->
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
</head>
<body>
<div class="siteWrap">
<div class="nav clearfix">
<ul class="clearfix">
<li>
Home<span>is where I work.</span>
</li>
<li>
About<span>this dude.</span>
</li>
<li>
Folio<span>take a peek.</span>
</li>
<li>
News<span>whats going on.</span>
</li>
<li>
Contact<span>got some work?</span>
</li>
</ul>
</div>
<div class="slogan">
<h1>Why Is this h1 not staying in here</h1>
</div>
</body>
/*Clearing Floats*/
html body * span.clear, html body * div.clear, html body * li.clear, html body * dd.clear { background: none; border: 0; clear: both; display: block; float: none; font-size: 0; list-style: none; margin: 0; padding: 0; overflow: hidden; visibility: hidden; width: 0; height: 0; }
.clearfix:after { clear: both;content: '.';display: block;visibility: hidden;height: 0; }
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/*Base*/
body { font: .875em/1.295em AurulentSansRegular,Impact,Arial,Geneva,Helvetica,sans-serif; background: #f2f2f2 url('../img/top_dot.png') no-repeat scroll center 9px; border-top: 9px solid #000; }
.siteWrap { width: 1024px; margin: 0 auto; }
.nav { width: 67%; margin: 50px auto 0; padding: 0 0 15px; border-bottom: 1px solid #BFBFBF; }
.nav ul { margin: 0 auto; width: 94%; }
.nav li { float: left; padding: 0 68px 0 0; font-size: 1em; text-transform: uppercase; }
.nav li:last-child { padding: 0; }
.nav li span { padding: 2px 0 0; clear: both; display: block; color: #868686; font-size: .875em; text-transform: none; }
.slogan { text-transform: uppercase; }
<div class="slogan"> isn't closed.