I've glommed together a navbar with its own stylesheet, that works approximately like I want it to. If I uncomment the links to stylesheets for bootstrap, however, many of its properties are overridden. Most noticeably is that the menu items are now in separate rows instead of the same.
<!doctype html>
<title>Navbar Test</title>
<h1>Navbar Test</h1>
<link rel="stylesheet" href="navbartest.css">
<nav class="navbar">
<ul class="nav navbar-nav left-links">
<li><a class="links" href="#">Home</a></li>
<li class="dropdown links">
<span>Menu 1</span>
<ul class="dropdown-content">
<li>Thing 1</li>
<li>Thing 2</li>
<li>Thing 3</li>
</ul>
</li>
<li class="dropdown links">
<span>Menu 2</span>
<ul class="dropdown-content">
<li>Thing 1</li>
<li>Thing 2</li>
</ul>
</li>
<li class="dropdown links">
<span>Menu 3</span>
<ul class="dropdown-content">
<li>Thing 1</li>
<li>Thing 2</li>
<li>Thing 3</li>
<li>Thing 4</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav right-links">
<li class="dropdown links">
<span>Welcome Brian</span>
<ul class="dropdown-content">
<li>User Settings</li>
<li>Log Out</li>
</ul>
</li>
</ul>
</nav>
<!--
<head>
<meta charset="utf-8">
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/"
crossorigin="anonymous">
<link
rel="stylesheet"
href="https://unpkg.com/bootstrap-table#1.16.0/dist/bootstrap-table.min.css">
<link
rel="stylesheet"
type="text/css"
href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.16.0/extensions/filter-control/bootstrap-table-filter-control.css">
</head>
-->
And here is the stylesheet, navbartest.css:
html { font-family: sans-serif; background: #eee; padding: 1rem; }
body { max-width: 960px; margin: 0 auto; background: white; }
h1 { font-family: serif; color: #377ba8; margin: 1rem 0; }
a { color: #377ba8; }
hr { border: none; border-top: 1px solid lightgray; }
body{
margin:0px;
margin-top:60px;
padding: 0px;
}
.selected{
border-bottom: 2px solid purple;
}
.content { padding: 0 1rem 1rem; }
.content > header { border-bottom: 1px solid lightgray; display: flex; align-items: flex-end; }
.content > header h1 { flex: auto; margin: 1rem 0 0.25rem 0; }
.flash { margin: 1em 0; padding: 1em; background: #cae6f6; border: 1px solid #377ba8; }
.post > header { display: flex; align-items: flex-end; font-size: 0.85em; }
.post > header > div:first-of-type { flex: auto; }
.post > header h1 { font-size: 1.5em; margin-bottom: 0; }
.post .about { color: slategray; font-style: italic; }
.post .body { white-space: pre-line; }
.content:last-child { margin-bottom: 0; }
.content form { margin: 1em 0; display: flex; flex-direction: column; }
.content label { font-weight: bold; margin-bottom: 0.5em; }
.content input, .content textarea { margin-bottom: 1em; }
.content textarea { min-height: 12em; resize: vertical; }
input.danger { color: #cc2f2e; }
input[type=submit] { align-self: start; min-width: 10em; }
nav { background: slategray; display: flex; align-items: center; padding: 0 0.5rem; }
nav h1 { flex: auto; margin: 0; }
nav h1 a { text-decoration: none; padding: 0.25rem 0.5rem; }
nav ul { display: flex; list-style: none; margin: 0; padding: 0; }
nav ul li a, nav ul li span, header .action { display: block; padding: 0.5rem; }
.dropdown {
position: relative;
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);
padding: 12px 16px;
z-index: 10;
}
.dropdown:hover .dropdown-content {
display: block;
}
.left-links{
flex:1 1 200px;
}
.links {
display: inline-block;
text-align: center;
padding: 14px;
color: rgb(0, 0, 0);
text-decoration: none;
font-size: 17px;
font-weight: bolder;
}
.links:hover {
border-bottom: 2px solid purple;
}
I'm aware that the solution is to increase CSS specificity. I'm not sure how to do that. If I want to give it the navbar an identifier like "my-navbar" so that the stylesheet doesn't get overridden, where exactly do I need to make those changes?
instead of using <nav class="navbar"> use <nav id="navbar">. An id has a higher specificity weight then a class. Then for every single CSS line that effect the navbar start with nav#navbar as it raises the specificty weight. The specificity level within the same category (!important; > inline-stye > head-style > CSS) is:
tag#id > tag.class > #id > .class > tag
So if every CSS Selector start with nav#navbar it will already outwieght every framework seelctor that only target tags or classes.
Related
I have been trying to make the colour fill the entire dropdown relative to the text you are hovering but it is not filling the whole div element, only the space around the word.
I have created a Fiddle to show the issue that I am having. I'm a beginner in CSS and HTML.
As you can see I have tried to add padding but it is not filling the div element as you hover it.
THE HTML is provided below and also within the Fiddle
header {
display: flex;
justify-content: space-evenly;
align-items: center;
padding-top: 1.0rem;
}
.sub-1 {
display: none;
}
.sub-1 ul {
display: flex;
flex-direction: column;
gap: 2rem;
padding-right: 4rem;
padding-left: 1rem;
margin-left: -9.5rem;
height: 27.5rem;
font-size: 1.6rem;
background-color: white;
list-style: none;
}
.sneakers {
margin-top: 2rem;
}
.sub-1 a:link,
.sub-1 a:visited {
color: black;
text-decoration: none;
}
.sub-1 a:hover {
padding: 10px;
background-color: blue;
}
li:hover .sub-1 {
display: block;
position: absolute;
margin-left: -2rem;
box-shadow: 1px 1px 10px grey;
}
.search-txt {
border: none;
outline: none;
padding-top: 1.0rem;
padding-left: 1.0rem;
font-size: 1.5rem;
color: black;
}
.search-nav {
display: flex;
font-size: 1.6rem;
list-style: none;
gap: 2.0rem;
margin-left: -7.0rem;
margin-top: -0.5rem;
caret-color: transparent;
}
<header class="header">
<body>
<div class="navbar">
<ul class="search-nav">
<li><a class="main-nav-link" href="#browse">Browse</a>
<div class="sub-1">
<ul class="">
<li class="sneakers">Sneakers
</li>
<li>Apparel</li>
<li>Electronics</li>
<li>Trading Cards</li>
<li>Collectibles</li>
<li>Accessories</li>
<li>NFTs</li>
</ul>
</div>
</li>
<li><a class="main-nav-link" href="#news">News</a></li>
<li><a class="main-nav-link" href="#help">About</a>
</li>
<li><a class="main-nav-link" href="#account">My Account</a></li>
<li><a class="main-nav-link sell" href="#sell">Sell</a></li>
</ul>
</div>
</header>
Fiddle
if i understand correctly the wrapper div with the sub-1 class is unnecessary. If you remove that div and add that class to the ul below it
<li><a class="main-nav-link" href="#browse">Browse</a>
<ul class="sub-1">
<li class="sneakers">Sneakers
</li>
<li>Apparel</li>
<li>Electronics</li>
<li>Trading Cards</li>
<li>Collectibles</li>
<li>Accessories</li>
<li>NFTs</li>
</ul>
Then in your css add a background-color
li:hover > .sub-1{
display: block;
position: absolute;
margin-left: -2rem;
box-shadow: 1px 1px 10px grey;
background: red;
}
I hope this helps, cheers!
Here's my HTML:
<body>
<nav class="navbar">
<span class="navbar-toggle" id="js-navbar-toggle">
<i class="fas fa-bars"></i>
</span>
logo
<ul class="main-nav" id="js-menu">
<li>
Home
</li>
<li>
Products
</li>
<li>
About Us
</li>
<li>
Contact Us
</li>
<li>
Blog
</li>
</ul>
</nav>
</body>
Here's my CSS:
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: "Josefin Sans", sans-serif;
}
.navbar {
font-size: 18px;
padding-bottom: 10px;
}
.main-nav {
list-style-type: none;
display: none;
}
.nav-links,
.logo {
text-decoration: none;
color: black;
}
.main-nav li {
text-align: center;
margin: 15px auto;
}
.logo {
display: inline-block;
font-size: 22px;
margin-top: 10px;
margin-left: 20px;
}
.navbar-toggle {
position: absolute;
top: 10px;
right: 20px;
cursor: pointer;
color: rgba(255, 255, 255, 0.8);
font-size: 24px;
}
.active {
display: block;
}
And this is the output I'm getting:
I'd like my output to be like this instead (ignore the spacing difference, just my screenshot, but have them split in the center like so):
What's the best way of doing this?
I'm thinking of creating another unorder list and moving it, but I don't know how to do that.
Make use of justify-content: space-between;.
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
ul {
list-style-type: none;
}
.nav-links, .logo {
text-decoration: none;
color: #000;
}
.navbar {padding: 20px;}
.navbar, ul {display: flex; flex-direction:row;}
ul li {padding: 0 5px;}
.wrapper {display:flex; justify-content: space-between; width:100%; }
<nav class="navbar">
logo
<div class="wrapper">
<ul class="main-nav" id="js-menu">
<li>
Home
</li>
<li>
Products
</li>
<li>
About Us
</li>
</ul>
<ul class="ul2">
<li>
Contact Us
</li>
<li>
Blog
</li>
</ul>
</div>
</nav>
I am a fresh newcomer and I have been studying and practising flexbox and CSS, just now I was trying to move my float elements into flexbox, but for a reason, I don't know my menu is broken I see the drop-down menu items upper the hamburger button, I would be happy if someone could explain what I am doing bad, thank you in advance. Here is the code:
.header {
background-color: #fff;
position: fixed;
text-align: center;
height: 50px;
width: 100%;
max-width: 480px;
box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, .1);
z-index: 3;
display: flex;
flex-direction: row-reverse;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
}
.header ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
background-color: #fff;
display: flex;
flex-direction: column;
flex: 1;
}
.header .logo {
/*float: right; */
display: block;
font-size: 1em;
padding: 20px 20px;
color: #000;
display: inline-block;
}
.header .logo img {
height: 12px;
width: 12px;
}
.header .mail {
/* float: right; */
display: block;
font-size: 1em;
padding: 20px 20px;
color: #000;
display: inline-block;
}
.header .mail img {
height: 15px;
width: 19px;
}
.header .menu-item {
font-size: 1em;
color: #000;
padding-top: 30px;
line-height: 2.5em;
}
.header .menu-sub-item {
font-size: 1em;
color: #c4c0bf;
line-height: 2.5em;
}
.header .menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
display: flex;
}
<header class="header">
<img src="" alt="">
<img src="" alt="">
<input class="menu-btn" type="checkbox" id="menu-btn">
<label class="menu-icon" for="menu-btn"><span class="nav-icon"></span></label>
<ul class="menu">
<li class="menu-item"><span></span></li>
<li class="menu-sub-item">
</li>
<hr>
<li class="menu-item"><span></span></li>
<li class="menu-sub-item">
</li>
<li class="menu-sub-item">
</li>
<li class="menu-sub-item">
</li>
<li class="menu-sub-item">
</li>
<hr>
<li class="menu-item"><span></span></li>
<li class="menu-sub-item">
</li>
<li class="menu-sub-item">
</li>
<li class="menu-sub-item">
</li>
</ul>
</header>
[as you see, the menu has reduced his size and the drop down went up after moving all elements into flexbox, before the menu cover his width and drop down cover all the background]
I want the position of my navigation to be fixed. But when I change the position to "fixed" in nav, it looks very weird.
Here are two examples:
Without fixed position: https://jsfiddle.net/Timowo/3nrvch3c/
<nav>
<ul>
<li class="category">Contact</li>
<li class="category">Work</li>
<li class="category active">Home</li>
<li class="logotext">Logo</li>
</ul>
</nav>
With fixed position: https://jsfiddle.net/Timowo/5aock5k1/
<nav style="position: fixed;">
<ul>
<li class="category">Contact</li>
<li class="category">Work</li>
<li class="category active">Home</li>
<li class="logotext">Logo</li>
</ul>
</nav>
What do I have to change so it's inline but also fixed?
Thanks!
With position:fixed the element will collapse to the width of the widest descendant..in the absence of a defined width.
Just set width:100%
* {
box-sizing: border-box;
}
body {
margin: 0 auto;
background-color: red;
}
nav {
transition: all 0.2s ease-in-out;
position: fixed;
width: 100%;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: transparent;
}
nav ul li.logo {
padding: 14px;
float: left;
}
nav ul li.logotext {
font-family: Futura;
color: white;
font-size: 1.3em;
padding: 28px;
text-shadow: 3px 3px black;
}
nav ul li.category a {
display: block;
color: white;
text-align: center;
padding: 30px 20px;
text-decoration: none;
font-size: 1.2em;
float: right;
font-family: Futura;
text-shadow: 3px 3px black;
}
nav ul li.category:hover a {
background-color: #212121;
}
nav ul li.active a {
background-color: #212121;
}
<nav>
<ul>
<li class="category">Contact
</li>
<li class="category">Work
</li>
<li class="category active">Home
</li>
<li class="logotext">Logo</li>
</ul>
</nav>
I am trying to use a flexbox nav menu with dropdowns for some menus. For some reason, on hover, the dropdown lists are showing up to the right of the container I am hovering on. I would like for them to show below, like a normal nav menu.
Here is a codepen:
http://codepen.io/anon/pen/XbmaBY
HTML:
<nav id="nav">
<ul class="nav-flex">
<li class="nav-brand-flex">
<img src="img.png" \>
</li>
<li class="nav-link-flex nav-flex-dropdown">
Dropdown 1
<div>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
</ul>
</div>
</li>
<li class="nav-link-flex nav-flex-dropdown">
Dropdown 2
<div>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
</div>
</li>
<li class="nav-link-flex">
Regular 1
</li>
<li class="nav-link-flex">
Regular 2
</li>
<li class="nav-link-flex">
Regular 3
</li>
</ul>
</nav>
Sass:
.nav-flex {
display: flex;
list-style-type: none;
padding: 0;
background-color: #58575f;
li {
justify-content: center;
a {
align-self: center;
color: white;
font-weight: 300;
font-family: 'Open Sans', sans-serif;
letter-spacing: .4px;
}
}
#media (max-width: 760px) {
padding-top: 0;
flex-wrap: nowrap;
-webkit-flex-wrap: nowrap;
flex-direction: column;
-webkit-flex-direction: column;
background-color: #f6f6f6;
}
}
.nav-link-flex {
display: flex;
padding: 0 12.5px;
position: relative;
#media (max-width: 760px) {
width: 90%;
background-color: #494949;
border-radius: 20px;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
font-size: 22px;
padding: 10px;
}
&:hover {
background-color: white;
a {
color: black;
text-decoration: none;
&+ div {
display: block;
}
}
}
a {
&+ div {
border-radius: 0 0 2px 2px;
box-shadow: 0 3px 1px rgba(0,0,0,.05);
display: none;
font-size: 1rem;
position: absolute;
width: 195px;
}
}
}
.nav-brand-flex {
margin-right: auto;
display: flex;
padding: 5px 0;
a {
display: flex;
img {
height: 35px;
align-self: center;
}
}
#media (max-width: 760px) {
margin: 0;
background-color: #494949;
width: 100%;
border-radius: 0;
font-size: 36px;
padding: 10px 0;
margin-bottom: 10px;
}
}
Any help would be greatly appreciated, because I cannot figure out why they are going to the right instead of below.
This happens because the default value of flex-direction is flex-direction: row. You want to override this, by adding flex-direction: column; to .nav-link-flex. So, it should be:
.nav-link-flex {
display: flex;
padding: 0 12.5px;
position: relative;
flex-direction: column; // <-- add this line in your scss
...
By way of example I've added this in to a fork of your pen.