I have a flex container that comes after another flex container,
first one is navigation bar and the second is the page content.
I tried making the content take the whole height of the page, and found only one thing to work which is setting container's height to 100vh.
But then I faced a problem where I need to subtract from the viewport, the height of the navigation.
/* Mixins Definitions */
/* Actual CSS */
.navbar {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
margin: 0;
padding: 0;
background: rgba(0, 0, 0, 0.81);
font-size: 14px;
-webkit-flex-flow: row nowrap;
justify-content: flex-end;
align-items: stretch;
list-style: none;
}
.navbar li {
margin: 0;
line-height: 3.2em;
display: block;
}
.navbar li i {
margin-right: 10px;
}
.navbar li a {
color: #9d9d9d;
text-decoration: none;
padding: 15px;
margin: 0;
}
.navbar li a:hover {
color: #FFFFFF;
}
.navbar li:first-child {
margin-right: auto;
}
.navbar li:first-child a {
font-size: 20px;
}
#media all {
}
#media all and (max-width: 600px) {
.navbar {
justify-content: space-around;
}
.navbar li:first-child {
display: none;
}
}
.container {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
margin: 0;
padding: 0;
}
.container .sidebar {
width: 16.5%;
border-right: 1px solid #ee0005;
}
.container .sidebar .navigation {
padding: 0;
list-style: none;
}
.container .sidebar .navigation a {
padding: 10px 15px 10px 20px;
text-decoration: none;
display: inline-block;
color: #337ab7;
width: 100%;
}
.container .sidebar .navigation a:hover {
background-color: #EEEEEE;
}
.container .sidebar .navigation .active > a {
background-color: #428bca;
color: #FFFFFF;
}
.container .content {
flex: 1;
height: 100%;
padding: 30px;
}
* {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
body {
background-color: #f8f8f8;
margin: 0;
min-height: 100%;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<body>
<ul class="navbar">
<li>Company</li>
<li><i class="fa fa-sign-in fa-lg" aria-hidden="true"></i>Log In</li>
<li>Dashboard</li>
</ul>
<div class="container">
<div class="sidebar">
<ul class="navigation">
<li>Dashboard</li>
<li class="active">Hosts <span class="sr-only">(current)</span></li>
<li>Users</li>
</ul>
</div>
<div class="content">Content</div>
</div>
</body>
https://jsfiddle.net/0xj1v8mw/1/
You can set height on the body, instead of .container, and add some additional flex rules:
fiddle
/* Mixins Definitions */
/* Actual CSS */
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.navbar {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
margin: 0;
padding: 0;
background: rgba(0, 0, 0, 0.81);
font-size: 14px;
-webkit-flex-flow: row nowrap;
justify-content: flex-end;
align-items: stretch;
list-style: none;
}
.navbar li {
margin: 0;
line-height: 3.2em;
display: block;
}
.navbar li i {
margin-right: 10px;
}
.navbar li a {
color: #9d9d9d;
text-decoration: none;
padding: 15px;
margin: 0;
}
.navbar li a:hover {
color: #FFFFFF;
}
.navbar li:first-child {
margin-right: auto;
}
.navbar li:first-child a {
font-size: 20px;
}
#media all {}
#media all and (max-width: 600px) {
.navbar {
justify-content: space-around;
}
.navbar li:first-child {
display: none;
}
}
.container {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
margin: 0;
padding: 0;
flex: 1;
}
.container .sidebar {
width: 16.5%;
border-right: 1px solid #ee0005;
}
.container .sidebar .navigation {
padding: 0;
list-style: none;
}
.container .sidebar .navigation a {
padding: 10px 15px 10px 20px;
text-decoration: none;
display: inline-block;
color: #337ab7;
width: 100%;
}
.container .sidebar .navigation a:hover {
background-color: #EEEEEE;
}
.container .sidebar .navigation .active>a {
background-color: #428bca;
color: #FFFFFF;
}
.container .content {
flex: 1;
height: 100%;
padding: 30px;
}
* {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
body {
background-color: #f8f8f8;
margin: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
}
<body>
<ul class="navbar">
<li>Company</li>
<li><i class="fa fa-sign-in fa-lg" aria-hidden="true"></i>Log In</li>
<li>Dashboard</li>
</ul>
<div class="container">
<div class="sidebar">
<ul class="navigation">
<li>Dashboard</li>
<li class="active">Hosts <span class="sr-only">(current)</span></li>
<li>Users</li>
</ul>
</div>
<div class="content">sdfsd</div>
</div>
</body>
Added height: 100% to the html, body and .container elements:
/* Mixins Definitions */
/* Actual CSS */
html, body {
height: 100%;
}
.navbar {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
margin: 0;
padding: 0;
background: rgba(0, 0, 0, 0.81);
font-size: 14px;
-webkit-flex-flow: row nowrap;
justify-content: flex-end;
align-items: stretch;
list-style: none;
}
.navbar li {
margin: 0;
line-height: 3.2em;
display: block;
}
.navbar li i {
margin-right: 10px;
}
.navbar li a {
color: #9d9d9d;
text-decoration: none;
padding: 15px;
margin: 0;
}
.navbar li a:hover {
color: #FFFFFF;
}
.navbar li:first-child {
margin-right: auto;
}
.navbar li:first-child a {
font-size: 20px;
}
#media all {
}
#media all and (max-width: 600px) {
.navbar {
justify-content: space-around;
}
.navbar li:first-child {
display: none;
}
}
.container {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
margin: 0;
padding: 0;
height: 100%;
}
.container .sidebar {
width: 16.5%;
border-right: 1px solid #ee0005;
}
.container .sidebar .navigation {
padding: 0;
list-style: none;
}
.container .sidebar .navigation a {
padding: 10px 15px 10px 20px;
text-decoration: none;
display: inline-block;
color: #337ab7;
width: 100%;
}
.container .sidebar .navigation a:hover {
background-color: #EEEEEE;
}
.container .sidebar .navigation .active > a {
background-color: #428bca;
color: #FFFFFF;
}
.container .content {
flex: 1;
height: 100%;
padding: 30px;
}
* {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
body {
background-color: #f8f8f8;
margin: 0;
min-height: 100%;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
}
<body>
<ul class="navbar">
<li>Company</li>
<li><i class="fa fa-sign-in fa-lg" aria-hidden="true"></i>Log In</li>
<li>Dashboard</li>
</ul>
<div class="container">
<div class="sidebar">
<ul class="navigation">
<li>Dashboard</li>
<li class="active">Hosts <span class="sr-only">(current)</span></li>
<li>Users</li>
</ul>
</div>
<div class="content">sdfsd</div>
</div>
</body>
For container class just use height: calc(100vh - 46px);.
Where I saw your navigation bar height is 46px from your given demo.
Related
I have a flex layout, and its code like following
<div class="navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item ">
Home
</li>
<li class="nav-item ">
Profile
</li>
<li class="nav-item">
Logout
</li>
</ul>
</div>
And its css like this
.navbar-collapse {
display: flex !important;
-ms-flex-preferred-size: auto;
flex-basis: auto;
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-align: center;
align-items: center;
}
.navbar-nav {
margin-left: auto !important;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: row;
padding-left: 0;
list-style: none;
}
.navbar-nav .nav-item {
display: inline-flex;
text-align: -webkit-match-parent;
position: relative;
flex-shrink: 0;
padding-bottom: 0;
height: 100%;
}
.navbar-nav .nav-item a {
color: #fff;
font-weight: 400;
text-transform: capitalize;
cursor: pointer;
display: inline-flex;
align-items: center;
padding: 0 0.1rem;
white-space: nowrap;
position: relative;
}
It looks like this
The a element currently appears to have no height, and I want it to be as heigh as the parent element, how? Thank you.
Append:
The image shows what it looks like when I'm in chrome developer mode. Above is all my code.
The issue is with the default style of ul element.
ul has a default margin value of 1em as below.
ul {
display: block;
list-style-type: disc;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 40px;
}
You have to override this and bring this to you anchor tag as padding, because you are handling the hover effect of anchor tag. So this value should be set as the padding so that this will not break the layout while hovering.
I have fixed that in the below snippet.
Working Fiddle
.navbar-collapse {
display: flex !important;
-ms-flex-preferred-size: auto;
flex-basis: auto;
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-align: center;
align-items: center;
}
.navbar-nav {
margin-left: auto !important;
margin: 0; /* Added */
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: row;
padding-left: 0;
list-style: none;
}
.navbar-nav .nav-item {
display: inline-flex;
text-align: -webkit-match-parent;
position: relative;
flex-shrink: 0;
padding-bottom: 0;
height: 100%;
}
.navbar-nav .nav-item a {
color: black;
font-weight: 400;
text-transform: capitalize;
cursor: pointer;
display: inline-flex;
align-items: center;
padding: 0 0.1rem;
white-space: nowrap;
position: relative;
}
/* New styles added */
.navbar-nav .nav-item a {
padding: 1em 0;
}
.navbar-nav .nav-item a:hover {
color: #fff;
background-color: #6c757d;
}
.navbar-collapse {
background-color: #00a82d;
}
<div class="navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item ">
Home
</li>
<li class="nav-item ">
Profile
</li>
<li class="nav-item">
Logout
</li>
</ul>
</div>
I implemented now the rest of your code from the fiddle within the comments. You need to give the ul a height of 100% of the parent: .navbar-nav { height: 100%; }. In my snippet you have in CSS-line 301 declared: a { display: block; } -> swap the value to flex to keep the text from the anchor centered.
.navbar-nav {
height: 100%;
}
.navbar-nav a {
display: flex; /* swap this with line 301 */
}
/* original css */
html {
line-height: 1.15;
-webkit-text-size-adjust: 100%
}
body {
margin: 0
}
main {
display: block
}
h1 {
font-size: 2em;
margin: .67em 0
}
hr {
box-sizing: content-box;
height: 0;
overflow: visible
}
pre {
font-family: monospace, monospace;
font-size: 1em
}
a {
background-color: transparent
}
abbr[title] {
border-bottom: 0;
text-decoration: underline;
text-decoration: underline dotted
}
b,
strong {
font-weight: bolder
}
code,
kbd,
samp {
font-family: monospace, monospace;
font-size: 1em
}
small {
font-size: 80%
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline
}
sub {
bottom: -0.25em
}
sup {
top: -0.5em
}
img {
border-style: none;
vertical-align: middle;
}
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
font-size: 100%;
line-height: 1.15;
margin: 0
}
button,
input {
overflow: visible
}
button,
select {
text-transform: none
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0
}
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText
}
fieldset {
padding: .35em .75em .625em
}
legend {
box-sizing: border-box;
color: inherit;
display: table;
max-width: 100%;
padding: 0;
white-space: normal
}
progress {
vertical-align: baseline
}
textarea {
overflow: auto
}
[type="checkbox"],
[type="radio"] {
box-sizing: border-box;
padding: 0
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto
}
[type="search"] {
-webkit-appearance: textfield;
outline-offset: -2px
}
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none
}
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit
}
details {
display: block
}
summary {
display: list-item
}
template {
display: none
}
[hidden] {
display: none
}
html {
font-size: 625%;
font-family: "Roboto", Arial, Helvetica, sans-serif;
height: 100%;
width: 100%;
}
body {
font-size: 0.16rem;
height: 100%;
width: 100%;
color: #6c757d;
line-height: 1.75;
}
a {
text-decoration: none;
}
.wrapper {
width: 100%;
height: 100%;
display: -webkit-flex;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
align-content: flex-start;
}
.container {
width: 100%;
flex-shrink: 0;
}
.row {
padding: 0 .12rem;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
flex: 1;
}
.navbar-brand {
font-size: 0.32rem;
color: #00a82d;
font-weight: 700;
text-transform: uppercase;
display: inline-block;
padding-top: 0.125rem;
padding-bottom: 0.125rem;
line-height: inherit;
white-space: nowrap;
}
.navbar-collapse {
display: flex!important;
-ms-flex-preferred-size: auto;
flex-basis: auto;
-ms-flex-positive: 1;
flex-grow: 1;
-ms-flex-align: center;
align-items: center;
}
.navbar-nav {
margin-left: auto!important;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: row;
padding-left: 0;
list-style: none;
}
.navbar-nav .nav-item {
display: inline-flex;
text-align: -webkit-match-parent;
position: relative;
flex-shrink: 0;
padding-bottom: 0;
height: 100%;
}
.device-width {
width: 9.6rem;
margin: 0 auto;
}
.usercenter-navbar {
background-color: #00a82d;
line-height: 1;
}
.usercenter .device-width {
width: 98%;
}
.usercenter-navbar .navbar-brand {
color: #fff;
font-size: .28rem;
font-weight: 700;
}
.usercenter-navbar .navbar-nav .nav-item a {
color: #fff;
font-weight: 400;
text-transform: capitalize;
cursor: pointer;
/* display: block; */
align-items: center;
padding: 0 0.1rem;
white-space: nowrap;
position: relative;
}
.usercenter-navbar .navbar-nav .nav-item a:hover {
color: #fff;
background-color: #6c757d;
}
#media screen and (max-width: 768px) {
body {
font-size: 0.13rem;
}
.auth-form {
width: 80%;
}
}
#media (min-width: 1200px) {
.device-width {
width: 11.4rem;
}
.auth-form {
width: 22%;
}
}
#media (min-width: 1920px) {
.device-width {
width: 11.4rem;
}
.auth-form {
width: 20%;
}
}
#media (min-width: 1200px) and (max-width: 1919px) {
.device-width {
width: 11.4rem;
}
.auth-form {
width: 26%;
}
}
#media (min-width: 992px) and (max-width: 1199px) {
.device-width {
width: 10.8rem;
}
.auth-form {
width: 30%;
}
}
#media (min-width: 768px) and (max-width: 991px) {
.device-width {
width: 9.6rem;
}
.auth-form {
width: 30%;
}
}
<div class="wrapper usercenter">
<div class="container usercenter-navbar">
<div class="device-width">
<div class="row">
<a class="navbar-brand" href="/">Workspace</a>
<div class="navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item current">
Home
</li>
<li class="nav-item ">
Profile
</li>
<li class="nav-item">
Logout
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
right now the purple just covers the text but it should be a nice block of colour like the dropdown is. Also, I have a bar under my nav img that should not be there when I hover. I know it is a width/height thing, but no matter where I put the code it does not work.
https://codepen.io/Smoki248/pen/NWxrOWK
li {
list-style: none;
}
a {
color: #f2f2f2;
text-decoration: none;
}
a:hover {
background-color: #8781bd;
}
.container {
max-width: 100%;
width: 100%;
margin: 0 auto;
text-align: center;
}
.btn {
padding: 0 20px;
height: 40px;
font-size: 1em;
font-weight: 400;
font-family: "Amatic SC", Roboto, sans-serif;
border: 1px #8781bd solid;
border-radius: 2px;
background: #8781bd;
color: #f2f2f2;
cursor: pointer;
}
.grid {
display: flex;
}
header {
position: fixed;
top: 0;
min-height: 75px;
padding: 0px 0px;
display: flex;
align-items: center;
background-color: #2f2f2f;
}
#media (max-width: 600px) {
header {
flex-wrap: wrap;
}
}
.logo {
width: 60vw;
}
#media (max-width:650px) {
.logo {
margin-top: 15px;
width: 100%;
position: relative;
}
}
.logo > img {
width: 100%;
height: 100%;
max-width: 100px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
margin-left: 20px;
}
#media (max-width: 650px) {
.logo > img {
margin: 0 auto;
}
}
nav {
font-weight: 400;
}
#media (max-width: 650px) {
nav {
margin-top: 10px;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 0 50px;
}
}
h1 {
font-family: "Amatic SC", Raleway, Roboto, sans-serif;
font-size: 35pt;
width: 100%;
text-align: center;
}
h2 {
font-family: "Amatic SC", Raleway, Roboto, sans-serif;
font-size: 24pt;
width: 100%;
text-align: center;
}
nav li {
padding-bottom: 30px 0px;
}
nav > ul {
width: 30vw;
display: flex;
flex-direction: row;
justify-content: space-around;
}
#media (max-width: 650px) {
nav > ul {
flex-direction: column;
}
}
.dropdown > li{
float: right;
overflow: hidden;
}
.dropdown > li a {
font-size: 16px;
border: none;
outline: none;
color: #f4f4f4;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
nav > li a:hover, .dropdown:hover a {
background-color: #8781bd;
color:#f4f4f4;
}
.dropdown-content {
display: none;
position: absolute;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
color: #f4f4f4;
z-index: 1;
margin-top: 20px;
min-width: 100px;
}
.dropdown-content li a {
float: none;
color: #f4f4f4;
padding: 10px 14px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content li a:hover {
background-color: #625aa9;
color: #f4f4f4;
}
.dropdown:hover .dropdown-content {
display: block;
}
<header id="page-wrapper">
<header id="header">
<div class="logo">
<nav>
<a href="http://www.wrecklessdevelopment.com"><img id="header-img"
src="images/wreckless-development-logo.gif" alt="Wreckless Development Logo"/></a>
</nav>
</div>
<h1>Wreckless Development</h1>
<nav id="navbar">
<ul>
<li>About</li>
<li>Services</li>
<div class="dropdown">
<li><i class="fa fa-caret-down"></i> Portfolio<li>
<div class="dropdown-content">
<ul>
<li>Photography</li>
<li>Composite</li>
<li>Logos</li>
<li>Branding</li>
<li>Advertising</li>
</ul>
</div>
</div>
<li>Contact</li>
<li>Blog</li>
</ul>
</nav>
</header>
</header>
The problem is tag a's default display is inline, so if you want to adjust height of a tag, you have to change it's default display to display: inline-block like this, and then you may be able to do whatever you want with that a tag, you can refer my code below for more details:
#header a {
display: inline-block; // change display style
height: 75px;
line-height: 75px; // center the text
padding-left: 12px;
padding-right: 12px;
}
.dropdown > li > a {
padding: 0 16px; // no need to padding top and bottom because we already had line-height and height
}
.dropdown-content{
margin-top: 75px; // push the .dropdown-content further to fit new css
}
#header .dropdown-content li a{
display: block; // set an <a> tag to full with of the dropdown
height: auto;
line-height: 16px; // center the text with current font-size
}
you can take a look in my codepen.io for more details here. Hope it will help
* {
box-sizing: border-box;
font-family: sans-serif;
margin: 0;
padding: 0;
}
html,
body {
font-size: 14px;
}
header {
width: 100vw;
height: 50px;
background-color: #222;
margin: 0 auto;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
}
/* Container for the Left and Right nav sections*/
header>div {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1140px;
width: 100%;
padding: 0 20px;
}
/* adjust width to set size */
nav {
width: 70%;
display: inline-flex;
justify-content: space-between;
}
nav ul {
list-style-type: none;
display: flex;
padding: 0 20px;
}
nav a {
padding: .8rem 1rem;
}
header>div>a {
font-size: 18px;
border-bottom:
}
.a-tag-header {
text-decoration: none;
color: #999;
display: block;
}
nav a:hover {
color: #fff;
}
/* -- Menu Toggle -- */
.MenuToggle {
display: none;
}
#media screen and (max-width: 890px) {
/* Header */
header {
height: auto;
}
header>div {
flex-direction: column;
padding: 0;
}
nav {
display: flex;
width: 100%;
flex-direction: column;
}
nav ul {
flex-direction: column;
text-align: center;
align-items: center;
padding: 0;
}
nav ul li {
height: 50px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
nav ul li:hover {
background-color: aqua;
}
header>div>a {
padding: .8rem 0;
}
header>div>a:hover {
background-image: #eee;
}
/* -- Menu Toggle -- */
.MenuToggle {
display: inline-block;
color: #F0F0F0;
font-size: 22px;
cursor: pointer;
position: absolute;
}
}
<header>
<div>
<a class="a-tag-header">Chemical Finger Print Analysis</a>
<div class="MenuToggle">
<span id="MenuToggleButton" onclick="NavToggle()">☰</span>
</div>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Data</li>
<li>Reports</li>
</ul>
<ul>
<li>Register</li>
<li>Login</li>
</ul>
</nav>
<div class="MenuToggle">
<span id="MenuToggleButton" onclick="NavToggle()">☰</span>
</div>
</div>
</header>
Hi i'm creating a flexbox navigation bar (Desktop First), this contains a title, and a nav with two separate tags. Iv'e gotten the nav and ul tags to act in a responsive manner however I cannot seem to figure out how to get the title and the menu toggle to share the top container responsively when a screen is smaller than 850px, I've tried a number of fixes but i can't seem to figure it out. Please Help
Try this
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
#media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="topnav" id="myTopnav">
Home
News
Contact
About
☰
</div>
</body>
</html>
I want to add a CSS dropdown menu to my header. It's works in part...
but when you mouse over it, this element escapes up. How to set it correctly?
It should stay in place and dropdown should be under the <li> element.
* {
margin: 0px;
padding: 0px;
font-family: 'Advent Pro', sans-serif;
}
body {
display: flex;
-ms-flex-direction: column;
flex-direction: column;
min-height: 100vh;
}
.wrapper {
display: flex;
flex-direction: column;
}
.navbar-list,
.navbar-list a,
.navbar,
.logo {
display: flex;
align-items: center;
}
.navbar {
display: flex;
background: #008cf4;
padding: 0 20px;
flex-wrap: wrap;
border-bottom: 1px solid #d6d7dd;
font-size: 14px;
}
.navbar .navbar-list {
height: 80px;
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
margin-left: auto;
flex-wrap: wrap;
flex-grow: 1;
justify-content: flex-end;
}
.navbar .navbar-list a {
color: #e9e9e9;
text-decoration: none;
margin: 0 10px;
padding: 0 10px;
text-transform: uppercase;
}
.navbar .navbar-list a:hover {
color: #fff;
}
.navbar .navbar-list i {
font-size: 14px;
color: inherit;
padding-bottom: 1px;
}
.navbar .navbar-list ul {
display: none;
flex-direction: column;
list-style-type: none;
}
.navbar .navbar-list ul li {
list-style-type: none;
justify-content: center;
align-items: flex-end;
align-content: flex-start;
height: auto !important;
opacity: 0.8;
background: black;
text-align: center;
}
.navbar .navbar-list ul li a {
height: 10px !important;
}
.navbar .navbar-list ul li a:hover {
background-color: #a4a4a4;
height: 10px;
}
.navbar .navbar-list li:hover ul {
display: block;
height: auto !important;
}
.navbar .logo {
margin-right: 15px;
}
.navbar .logo h1 {
font-family: 'Alegreya', sans-serif;
font-size: 35px;
}
<link href="//fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href='//fonts.googleapis.com/css?family=Alegreya&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Advent+Pro&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<script src="//code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous">
</script>
<div class="wrapper">
<nav class="navbar">
<div class="logo">
<h1>Your logo</h1>
</div>
<ul class="navbar-list">
<li>
<a href="#">
<i class="material-icons">home</i> Dashboard
</a>
</li>
<li>
<a href="#">
<i class="material-icons">build</i> Account & settings
</a>
<ul>
<li>
1
</li>
<li>
2
</li>
<li>
3
</li>
</ul>
</li>
</ul>
<div>avatar</div>
</nav>
</div>
View on Codepen with SCSS
You need to set position:relative to the parent item, then position:absolute on the dropdown.
Without touching the HTML, that'd be
.navbar-list > li{
position:relative;
}
.navbar-list ul{
position:absolute;
width:100%;
}
The second rule sets any <ul> that's a descendant from the .navbar-list as absolute positioned, removing it from the flow so they won't "push" others, while the first makes the any <li> that's a direct child of the .navbar-list the point from which their child <ul> will be positioned.
Add position: relative to .navbar-list li
Add position: absolute top: 100% left: 0 and width: 100% to li ul
Updated codepen
try this
* {
margin: 0px;
padding: 0px;
font-family: 'Advent Pro', sans-serif;
}
body {
display: flex;
-ms-flex-direction: column;
flex-direction: column;
min-height: 100vh;
}
.wrapper {
display: flex;
flex-direction: column;
}
.navbar-list,
.navbar-list a,
.navbar,
.logo {
display: flex;
align-items: center;
}
.navbar {
display: flex;
background: #008cf4;
padding: 0 20px;
flex-wrap: wrap;
border-bottom: 1px solid #d6d7dd;
font-size: 14px;
}
.navbar .navbar-list {
height: 80px;
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
margin-left: auto;
flex-wrap: wrap;
flex-grow: 1;
justify-content: flex-end;
}
.navbar .navbar-list a {
color: #e9e9e9;
text-decoration: none;
margin: 0 10px;
padding: 0 10px;
text-transform: uppercase;
}
.navbar .navbar-list a:hover {
color: #fff;
}
.navbar .navbar-list i {
font-size: 14px;
color: inherit;
padding-bottom: 1px;
}
.navbar .navbar-list ul {
display: none;
flex-direction: column;
list-style-type: none;
position: absolute;
width: auto;
}
.navbar .navbar-list ul li {
list-style-type: none;
justify-content: center;
align-items: flex-end;
align-content: flex-start;
height: auto !important;
opacity: 0.8;
background: black;
text-align: center;
position: relative;
}
.navbar .navbar-list ul li a {
height: 10px !important;
}
.navbar .navbar-list ul li a:hover {
background-color: #a4a4a4;
height: 10px;
}
.navbar .navbar-list li:hover ul {
display: block;
height: auto !important;
}
.navbar .logo {
margin-right: 15px;
}
.navbar .logo h1 {
font-family: 'Alegreya', sans-serif;
font-size: 35px;
}
<link href="//fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href='//fonts.googleapis.com/css?family=Alegreya&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Advent+Pro&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<script src="//code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous">
</script>
<div class="wrapper">
<nav class="navbar">
<div class="logo">
<h1>Your logo</h1>
</div>
<ul class="navbar-list">
<li>
<a href="#">
<i class="material-icons">home</i> Dashboard
</a>
</li>
<li>
<a href="#">
<i class="material-icons">build</i> Account & settings
</a>
<ul>
<li>
1
</li>
<li>
2
</li>
<li>
3
</li>
</ul>
</li>
</ul>
<div>avatar</div>
</nav>
</div>
I am currently using HTML and CSS to modify my library's libguides2 homepage. For some reason there is a phantom white column that is showing up on the right side of the page. It's there in Chrome, Firefox, and Safari. It does NOT show up on IE. It doesn't show up when the page loads, but if you scroll to the right on desktop or zoom out on mobile, there it is.
Here's a screenshot:
Here's the live site:
http://nybg.beta.libguides.com/
And here's my fiddle:
https://jsfiddle.net/pjp5rxws/
The white space isn't in the fiddle, but Springshare support (the people who make and host libguides) says that it's not something in the code for the page that I can't get at.
Any ideas? This issue is not the end of the world, but I would like to understand and fix it if possible!
And I know that my css should be in a separate document although it is not yet in a separate document--the site is set up in such a way that this is how I am managing my beta version for the time being. I do plan to move the css!
I'm not sure what of my code is helpful here, so here is my css:
* {
margin: 0;
padding: 0;
outline: none;
-webkit-box-sizing: border-box;
- moz-box-sizing: border-box;
box-sizing: border-box;
}
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
display: block;
}
html {
font-size: 100%;
height: auto !important;
height: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
.clear {
display: block;
}
.clear::after {
clear: both;
content: ".";
display: block;
height: 1px;
visibility: hidden;
}
html,
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
mobilenav {
display: none;
width: 100%;
z-index: 1000;
background-color: #000000;
text-align: center;
}
mobilenav div {
width: 100%;
}
mobilenav a {
color: #ffffff;
letter-spacing: 0.0625em;
font-weight: bold;
text-transform: uppercase;
display: block;
text-decoration: none;
text-align: center;
padding: 1rem;
}
mobilenav a:hover {
color: #DADADA;
text-decoration: none;
}
mobilenav > nav > ul {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
list-style: none;
margin: 0;
padding: 0;
}
mobilenav > nav > ul:hover {
background-color: #000000;
}
mobilenav > nav > ul > li {
flex: 0 1 auto;
margin: 0;
padding: 0;
position: relative;
width: 100%;
transition: all linear 0.1s;
}
mobilenav > nav > ul > li a + div {
display: none;
position: absolute;
}
mobilenav > nav > ul > li:hover a + div {
display: block;
background-color: #000000;
}
mobilenav > nav > ul > li a + div > ul {
list-style-type: none;
}
mobilenav > nav > ul > li a + div > ul > li {
margin: 0;
padding: 0;
}
mobilenav > nav > ul > li a + div > ul > li > a {
display: block;
padding: .25rem 1.5rem;
text-decoration: none;
}
mobilenav > nav > ul > li > a {
align-items: flex-start;
display: flex;
padding: 1rem 1.5rem;
text-decoration: none;
}
.container {
display: flex;
padding: 1% 0;
}
.headerimage {
display: flex;
align-content: center;
align-items: center;
padding: 0 2%;
}
.headerimage img {
width: 100%;
padding-right: 50px;
}
.logoname {
text-transform: uppercase;
flex-flow: row;
}
.fullpage {
background-color: #ffffff;
}
.menu {
background-color: #000000;
}
.site-navigation ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
flex-direction: row;
flex-wrap: wrap;
}
.site-navigation a {
color: #ffffff;
letter-spacing: 0.0625em;
font-weight: bold;
text-transform: uppercase;
display: block;
text-decoration: none;
text-align: center;
padding: 1rem;
}
.site-navigation a:hover {
color: #DADADA;
}
.fullpagesnh {
background: url(https://s3.amazonaws.com/libapps/accounts/69823/images/IVO_2541_LARGE.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.fullpagesnh h2 {
color: #ffffff;
}
.fullpagesnh a {
text-decoration: none;
color: #ffffff;
}
.fullpagesnh a:hover {
color: #ffffff;
text-decoration: underline;
}
.snhcontainer {
display: flex;
justify-content: center;
}
.searchandhours {
flex-direction: row;
display: flex;
align-items: center;
}
.librarysearch {
margin: 100px 0 100px 0;
padding: 20px;
}
.fullpagesnh form {
padding: 20px;
background-color: rgba(0, 0, 0, .75);
}
.hours ul {
padding: 20px;
margin-left: 50px;
background-color: rgba(0, 0, 0, .75);
color: #ffffff;
list-style: none;
}
.contentcontainer {
background-color: #ffffff;
padding-top: 100px;
}
.row {
display: inline-block;
}
.sideblack {
margin: 5% 2.5%;
margin-bottom: 50px;
padding: 20px;
background-color: #000000;
color: #ffffff;
text-transform: uppercase;
text-align: center;
font-size: larger;
font-weight: bold;
}
.sideblack:hover {
color: #000000;
background-color: #ffffff;
}
.Special_box {
margin: 5% 2.5%;
border: 1px solid #CECECE;
word-wrap: break-word;
}
.Special_box h2 {
color: #000000;
}
.Special_box p {
color: #999AA9;
font-weight: bold;
}
.Special_box:hover {
background-color: #CECECE;
}
.Special_box a {
color: #ffffff;
}
.Special_box .bottom {
padding: 10px;
}
.Special_box img {
width: 100%;
margin: 0;
padding: 0;
}
.libguidescontent .row {
padding: 0;
margin: 0;
width: 100%;
}
.nav.nav-pills button.btn {
background-color: #ffffff !important;
color: #000000 !important;
}
.libguidescontent .alert {
background-color: #F5F5F5;
border: none;
}
.libguidescontent h1 {
padding-top: 50px;
padding-bottom: 25px;
}
.libguidescontent a {
color: #000000;
}
.libguidescontent strong {
color: #26B56E;
}
.whitespace {
height: 200px;
}
.footfoot {
background-color: #000000;
}
.foot-navigation ul {
display: flex;
list-style: none;
margin: 0;
padding-bottom: 40px;
display: flex;
justify-content: center;
flex-direction: row;
flex-wrap: wrap;
}
.foot-navigation ul li {
padding-right: 50px;
color: #ffffff;
font-weight: bold;
}
.foot-navigation ul li h3 {
font-size: 16px;
color: #ffffff;
text-transform: uppercase;
font-weight: bold;
margin-bottom: 0;
}
#media only screen and (max-width: 1024px) {
.Special_box img {
display: none;
}
.sideblack {
display: none;
}
}
#media all and (max-width: 600px) {
mobilenav {
display: block;
}
.contentcontainer {
padding: 0;
}
.headerimage img {
width: 200px;
padding-right: 30px;
}
.headerimage h1 {
font-size: 14px;
word-wrap: normal;
font-weight: 600;
}
.site-navigation ul {
flex-flow: column wrap;
padding: 0;
}
.foot-navigation ul {
flex-flow: column wrap;
padding-left: 20px;
}
.searchandhours {
flex-flow: column wrap;
padding-left: 20px;
}
.librarysearch {
margin: 0;
}
.libraryhours {
display: none;
}
body {
margin: 0;
}
.menu {
display: none;
}
}
In your .contentcontainer div, you have multiple .row elements with negative left and right margins :
.row {
margin-right: -15px;
margin-left: -15px;
}
You might want to give your .contentcontainer some padding of the opposite value :
.contentcontainer {
padding-left: 15px;
padding-right: 15px;
}
Removing the margin for row solved the issue.
See Attached for reference.
overflow-x: hidden;
add that to the css of the html
html, body {
width: 100%;
height: 100%;
overflow-x: hidden;
margin: 0px;
padding: 0px;
}
Thank you so much, all! Many good solutions. Here is another I got back from the Springshare Lounge group:
Hi Esther,
It looks like the main section of your page is using Bootstrap columns (the part in ). However, it's not in a container or container-fluid, so the appropriate sizing isn't being applied. I'd suggest changing your code just a tiny bit:
<div class="contentcontainer container-fluid">
<div class="departmentbuttons">
That should do it!
Best,
Carrie, Springshare Support