With the following code, I'm trying to make it so that the 'scroll' div occupies exactly the remaining space of the 'frame' div's height (ending at its padding boundary).
I would like to avoid a situation where the height of the scroll div is hardcoded, as it should scale with its parent (according to the window height).
I haven't been able to figure out a CSS-based solution, and would much appreciate suggestions.
:root {
--dlgMW: 0px; --dlgW: 0px;
--dlgMH: 0px; --dlgH: 0px;
}
html, body {
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
}
.editor {
width:100vw;
height:100vh;
background-color: #393939;
overflow: hidden;
}
.dialog.show {
position: absolute;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
}
.dialog {
color: #CCC;
}
.dialog > .window {
position: absolute;
left: 50%;
top: 50%;
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
min-width: var(--dlgMW);
width: var(--dlgW);
min-height: var(--dlgMH);
height: var(--dlgH);
border-radius: 40px;
background-color: rgba(0,0,0,0.2);
}
.dialog > .window > .frame {
box-sizing: border-box;
padding: 30px;
height: 100%;
/*overflow: hidden;*/ /* FIXME - Should not be needed */
}
.dialog > .window > .frame > .body {
position: relative;
height: 80%;
}
.dialog .content > .scroll {
overflow-y: auto; /* FIXME Scroll should be visible when div would exceed frame's padding */
}
li.series {
display: block;
height: 3em;
border-bottom: 1px solid #CCC;
}
li.series:hover {
cursor: pointer;
}
<html lang="en_US" dir="LTR" style="--dlgMW:500px; --dlgW:50%; --dlgMH:0px; --dlgH:80%;">
<head>
<link rel="stylesheet" href="main.css">
<title></title>
</head>
<body>
<div class="editor">
<div class="dialog show">
<div class="window">
<div class="frame">
<div class="body">
<div class="content">
<h2>Switch Series</h2>
<div class="scroll">
<ol id="series_list">
<li class="series">
<span class="series_title">Create New Series</span>
</li>
<li class="series">
<span class="series_title">Main Timeline</span>
</li>
<!-- For testing scroll behavior -->
<li class="series">
<span class="series_title">Custom series 1</span>
</li>
<li class="series">
<span class="series_title">Custom series 2</span>
</li>
<li class="series">
<span class="series_title">Custom series 3</span>
</li>
<li class="series">
<span class="series_title">Custom series 4</span>
</li>
<li class="series">
<span class="series_title">Custom series 5</span>
</li>
<li class="series">
<span class="series_title">Custom series 6</span>
</li>
<li class="series">
<span class="series_title">Custom series 7</span>
</li>
<li class="series">
<span class="series_title">Custom series 8</span>
</li>
<li class="series">
<span class="series_title">Custom series 9</span>
</li>
<li class="series">
<span class="series_title">Custom series 10</span>
</li>
<li class="series">
<span class="series_title">Custom series 11</span>
</li>
<li class="series">
<span class="series_title">Custom series 12</span>
</li>
<li class="series">
<span class="series_title">Custom series 13</span>
</li>
<li class="series">
<span class="series_title">Custom series 14</span>
</li>
</ol>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Not sure why so many elements and position/transform, anyway, going down to .content, where it seems to happen, you may use the flex model :
:root {
--dlgMW: 0px;
--dlgW: 0px;
--dlgMH: 0px;
--dlgH: 0px;
}
html,
body {
width: 100vw;
height: 100vh;
margin: 0;
padding: 0;
}
.editor {
width: 100vw;
height: 100vh;
background-color: #393939;
overflow: hidden;
}
.dialog.show {
position: absolute;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
}
.dialog {
color: #CCC;
}
.dialog>.window {
position: absolute;
left: 50%;
top: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
min-width: var(--dlgMW);
width: var(--dlgW);
min-height: var(--dlgMH);
height: var(--dlgH);
border-radius: 40px;
background-color: rgba(0, 0, 0, 0.2);
}
.dialog>.window>.frame {
box-sizing: border-box;
padding: 1vh;
height: 100%;
/*overflow: hidden;*/
/* FIXME - Should not be needed */
}
.dialog>.window>.frame>.body {
position: relative;
height: 80%;
}
/*---------------*/
/* -------update-*/
/*---------------*/
.dialog .content {
display: flex;
flex-direction: column;
min-height: 0;
height: 100%;
}
/*---------------*/
/* ---end-update-*/
/*---------------*/
.dialog .content>.scroll {
overflow-y: auto;
/* FIXME Scroll should be visible when div would exceed frame's padding */
}
li.series {
display: block;
height: 3em;
border-bottom: 1px solid #CCC;
}
li.series:hover {
cursor: pointer;
}
<html lang="en_US" dir="LTR" style="--dlgMW:500px; --dlgW:50%; --dlgMH:0px; --dlgH:80%;">
<head>
<link rel="stylesheet" href="main.css">
<title></title>
</head>
<body>
<div class="editor">
<div class="dialog show">
<div class="window">
<div class="frame">
<div class="body">
<div class="content">
<h2>Switch Series</h2>
<div class="scroll">
<ol id="series_list">
<li class="series">
<span class="series_title">Create New Series</span>
</li>
<li class="series">
<span class="series_title">Main Timeline</span>
</li>
<!-- For testing scroll behavior -->
<li class="series">
<span class="series_title">Custom series 1</span>
</li>
<li class="series">
<span class="series_title">Custom series 2</span>
</li>
<li class="series">
<span class="series_title">Custom series 3</span>
</li>
<li class="series">
<span class="series_title">Custom series 4</span>
</li>
<li class="series">
<span class="series_title">Custom series 5</span>
</li>
<li class="series">
<span class="series_title">Custom series 6</span>
</li>
<li class="series">
<span class="series_title">Custom series 7</span>
</li>
<li class="series">
<span class="series_title">Custom series 8</span>
</li>
<li class="series">
<span class="series_title">Custom series 9</span>
</li>
<li class="series">
<span class="series_title">Custom series 10</span>
</li>
<li class="series">
<span class="series_title">Custom series 11</span>
</li>
<li class="series">
<span class="series_title">Custom series 12</span>
</li>
<li class="series">
<span class="series_title">Custom series 13</span>
</li>
<li class="series">
<span class="series_title">Custom series 14</span>
</li>
</ol>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
If it's not a duplicate of Fill remaining vertical space with CSS using display:flex , it is very similar :)
Related
What should I change in the following code to get my output right?
I want the skills and the bullets side-by-side but it's coming on the top of the skills.
I tried looking at different references but it spoiled my layout even more.
Below are my HTML and CSS codes:
.skills__content,
.languages__content {
grid-template-columns: repeat(2, 1fr);
}
.skills__content,
.experience__content {
gap: 1;
}
.languages__content {
gap: 0;
}
.skills__name,
.languages__name {
display: flex;
align-items: center;
margin-bottom: var(--mb-3);
}
.skills__circle,
.languages__circle {
display: inline-block;
width: 5px;
height: 5px;
background-color: var(--text-color);
border-radius: 50%;
margin-right: 0.75rem;
}
<!-- Skills -->
<section class="skills section" id="skills">
<h2 class="section-title">Skills</h2>
<div class="skills__content bd-grid">
<ul class="skills__data">
<li class="skills__name">
<span class="skills__circle">C </span>
</li>
<li class="skills__name">
<span class="skills__circle">C++</span>
</li>
<li class="skills__name">
<span class="skills__circle">Python</span>
</li>
<li class="skills__name">
<span class="skills__circle">Java</span>
</li>
<li class="skills__name">
<span class="skills__circle">Linux</span>
</li>
</ul>
<ul class="skills__data">
<li class="skills__name">
<span class="skills__circle">Html</span>
</li>
<li class="skills__name">
<span class="skills__circle">Css</span>
</li>
<li class="skills__name">
<span class="skills__circle">Javascript</span>
</li>
<li class="skills__name">
<span class="skills__circle">React.js</span>
</li>
<li class="skills__name">
<span class="skills__circle">Firebase</span>
</li>
</ul>
<ul class="skills__data">
<li class="skills__name">
<span class="skills__circle">MYSQL</span>
</li>
<li class="skills__name">
<span class="skills__circle">Excel</span>
</li>
</ul>
</div>
</section>
Attaching pics for references:
This is how it is right now
and This is how I want it to look,
You can do like this by adding some properties to <li> tag also . Below is the correct implementation.
Removed some unnecessary styling also
ul {
display: grid;
grid-template-columns: repeat(2,1fr);
list-style: none;
grid-row-gap: 20px;
}
li {
display: flex;
flex-direction: row;
}
.skills__name {
align-items: center;
}
.skills__circle,
.languages__circle {
display: flex;
align-items: center;
justify-content: left;
width: 5px;
height: 5px;
background-color: green;
border-radius: 50%;
margin-right: 5px;
}
<section class="skills section" id="skills">
<h2 class="section-title">Skills</h2>
<div class="skills__content">
<ul class="skills__data">
<li class="skills__name">
<span class="skills__circle"> </span>C
</li>
<li class="skills__name">
<span class="skills__circle"></span>C++
</li>
<li class="skills__name">
<span class="skills__circle"></span>Python
</li>
<li class="skills__name">
<span class="skills__circle"></span>Java
</li>
<li class="skills__name">
<span class="skills__circle"></span>Linux
</li>
</ul>
<ul class="skills__data">
<li class="skills__name">
<span class="skills__circle"></span>Html
</li>
<li class="skills__name">
<span class="skills__circle"></span>Css
</li>
<li class="skills__name">
<span class="skills__circle"></span>Javascript
</li>
<li class="skills__name">
<span class="skills__circle"></span>React.js
</li>
<li class="skills__name">
<span class="skills__circle"></span>Firebase
</li>
</ul>
<ul class="skills__data">
<li class="skills__name">
<span class="skills__circle"></span>MYSQL
</li>
<li class="skills__name">
<span class="skills__circle"></span>Excel
</li>
</ul>
</div>
</section>
I am trying to style a main navigation component, but I'm having trouble getting the background to stretch for a dynamic number of wrapped columns in the submenu popup. Can anyone help with this jsfiddle? I have exhausted my admitidly limited knowledge of CSS as well as anything I could find through google.
The markup comes from a content management system, so I have limited control of the generated markup, other than adding additional CSS classes, although I have full control over the CSS.
I almost got it working properly using column-count, but the number of columns need to be dynamic. I found other posts mentioning using display: flex, but still can't quite get the combination of flex and inline-block working properly.
This is the layout I am trying to achieve:
.container {
display: flex;
position: relative;
}
.container a {
text-decoration: none;
color: #424242;
}
ul {
list-style: none;
}
.main-navitation>.component-content {
position: absolute;
bottom: 0;
right: 0;
}
.rel-level1 {
display: inline-block;
padding: 10px;
position: relative;
}
.rel-level1>ul {
display: flex;
position: absolute;
top: 30px;
left: 0;
background: #e1e1e1;
border: 1px solid #c2c2c2;
padding: 5px;
max-height: 200px;
flex-wrap: wrap;
flex-direction: column;
}
.rel-level1>ul>li {
display: block;
}
.rel-level2 {
display: inline-block;
flex-grow: 1;
flex-shrink: 1 auto;
flex-basis: 100%;
width: 85px;
}
.rel-level2>a>.navigation-title {
display: inline-block;
font-weight: bold;
}
.rel-level2>ul {
padding-left: 0;
}
.rel-level3 {
padding-top: 3px;
display: inline-block;
width: 85px;
}
.rel-level3>a>.navigation-title {
border-bottom: solid 1px transparent;
display: inline-block;
font-size: 14px;
}
<div class="container">
<div class="navigation main-navigation">
<div class="component-content">
<nav>
<ul>
<li class="rel-level1">
<div class="navigation-title">Level 1</div>
<ul>
<li class="rel-level2">
<a href="/" class="navigation-title">
<div class="navigation-title">Submenu 1</div>
</a>
<ul>
<li class="rel-level3">
<a href="/" class="navigation-title">
<div class="navigation-title">Level 3</div>
</a>
</li>
<li class="rel-level3">
<a href="/" class="navigation-title">
<div class="navigation-title">Level 3</div>
</a>
</li>
</ul>
</li>
<li class="rel-level2">
<a href="/" class="navigation-title">
<div class="navigation-title">Submenu 2</div>
</a>
<ul>
<li class="rel-level3">
<a href="/" class="navigation-title">
<div class="navigation-title">Level 3</div>
</a>
</li>
<li class="rel-level3">
<a href="/" class="navigation-title">
<div class="navigation-title">Level 3</div>
</a>
</li>
<li class="rel-level3">
<a href="/" class="navigation-title">
<div class="navigation-title">Level 3</div>
</a>
</li>
</ul>
</li>
<li class="rel-level2">
<a href="/" class="navigation-title">
<div class="navigation-title">Submenu 3</div>
</a>
<ul>
<li class="rel-level3">
<a href="/" class="navigation-title">
<div class="navigation-title">Level 3</div>
</a>
</li>
<li class="rel-level3">
<a href="/" class="navigation-title">
<div class="navigation-title">Level 3</div>
</a>
</li>
<li class="rel-level3">
<a href="/" class="navigation-title">
<div class="navigation-title">Level 3</div>
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
Thanks!
It's a combination of factors:
You have your flex-direction set to column, when you're wanting row (which is actually the default, so you can remove the property from your CSS entirely), have a look at https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction
You've set a max-height to try to force the child elements to flow horizontally, alongside using flex-wrap: wrap. Neither of these properties are required if you change your flex-direction.
FYI, you can further simplify your HTML code, and even if you don't know CSS well, remove those rules which reference the unnecessary HTML code that can be removed:
ul {
list-style: none;
}
.rel-level1 {
display: inline-block;
padding: 10px;
position: relative;
}
.rel-level1>ul {
display: flex;
position: absolute;
top: 30px;
left: 0;
background: #e1e1e1;
border: 1px solid #c2c2c2;
padding: 5px;
max-height: 200px;
flex-wrap: wrap;
flex-direction: column;
}
.rel-level1>ul>li {
display: block;
}
.rel-level2 {
display: inline-block;
flex-grow: 1;
flex-shrink: 1 auto;
flex-basis: 100%;
width: 85px;
}
.rel-level2>a>.navigation-title {
display: inline-block;
font-weight: bold;
}
.rel-level2>ul {
padding-left: 0;
}
.rel-level3 {
padding-top: 3px;
display: inline-block;
width: 85px;
}
.rel-level3>a>.navigation-title {
border-bottom: solid 1px transparent;
display: inline-block;
font-size: 14px;
}
<ul>
<li class="rel-level1">
<ul>
<li class="rel-level2">
<a href="/" class="navigation-title">
<div class="navigation-title">Submenu 1</div>
</a>
<ul>
<li class="rel-level3">
<a href="/" class="navigation-title">
<div class="navigation-title">Level 3</div>
</a>
</li>
<li class="rel-level3">
<a href="/" class="navigation-title">
<div class="navigation-title">Level 3</div>
</a>
</li>
</ul>
</li>
<li class="rel-level2">
<a href="/" class="navigation-title">
<div class="navigation-title">Submenu 2</div>
</a>
<ul>
<li class="rel-level3">
<a href="/" class="navigation-title">
<div class="navigation-title">Level 3</div>
</a>
</li>
<li class="rel-level3">
<a href="/" class="navigation-title">
<div class="navigation-title">Level 3</div>
</a>
</li>
<li class="rel-level3">
<a href="/" class="navigation-title">
<div class="navigation-title">Level 3</div>
</a>
</li>
</ul>
</li>
<li class="rel-level2">
<a href="/" class="navigation-title">
<div class="navigation-title">Submenu 3</div>
</a>
<ul>
<li class="rel-level3">
<a href="/" class="navigation-title">
<div class="navigation-title">Level 3</div>
</a>
</li>
<li class="rel-level3">
<a href="/" class="navigation-title">
<div class="navigation-title">Level 3</div>
</a>
</li>
<li class="rel-level3">
<a href="/" class="navigation-title">
<div class="navigation-title">Level 3</div>
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
That said, your question is a duplicate of this post.
How to make flexible columns by content?
In this case, I need 4 columns if there is everything okay, but in any cases if list item is bigger than it needed I need make less columns. Prefer only CSS solution.
It is logical that this grid-template-columns: repeat(auto-fill, minmax(min-content, 1fr)); expression should have worked, but min-content and max-content is not working with "fr" units.
.parent {
display: flex;
}
.wrapper {
width: 450px;
padding: 15px;
margin: 0 auto;
box-sizing: border-box;
background-color: #d4d1d1;
}
.wrapper:first-child {
background-color: #cc8b8b;
}
.list {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(4, 1fr);
// grid-template-columns: repeat(auto-fill, minmax(min-content, 25%));
justify-content: center;
padding: 0;
margin: 0;
border: 1px dashed green;
}
.list__item {
display: flex;
flex-direction: column;
list-style: none;
align-items: center;
text-align: center;
border: 1px solid black;
}
.list__item-img {
width: 91px;
height: 91px;
background-color: #eaeaea;
}
<div class="parent">
<div class="wrapper">
<ul class="list">
<li class="list__item">
<div class="list__item-img"></div>
<span class="list__item-caption">Lorem</span>
</li>
<li class="list__item">
<div class="list__item-img"></div>
<span class="list__item-caption">Lorem</span>
</li>
<li class="list__item">
<div class="list__item-img"></div>
<span class="list__item-caption">Lorem</span>
</li>
<li class="list__item">
<div class="list__item-img"></div>
<span class="list__item-caption">Lorem</span>
</li>
<li class="list__item">
<div class="list__item-img"></div>
<span class="list__item-caption">Lorem</span>
</li>
<li class="list__item">
<div class="list__item-img"></div>
<span class="list__item-caption">Lorem</span>
</li>
<li class="list__item">
<div class="list__item-img"></div>
<span class="list__item-caption">Lorem</span>
</li>
<li class="list__item">
<div class="list__item-img"></div>
<span class="list__item-caption">Lorem</span>
</li>
<li class="list__item">
<div class="list__item-img"></div>
<span class="list__item-caption">Lorem</span>
</li>
</ul>
</div>
<div class="wrapper">
<ul class="list">
<li class="list__item">
<div class="list__item-img"></div>
<span class="list__item-caption">Very/long/word</span>
</li>
<li class="list__item">
<div class="list__item-img"></div>
<span class="list__item-caption">Very/long/word</span>
</li>
<li class="list__item">
<div class="list__item-img"></div>
<span class="list__item-caption">Very/long/word</span>
</li>
<li class="list__item">
<div class="list__item-img"></div>
<span class="list__item-caption">Very/long/word</span>
</li>
<li class="list__item">
<div class="list__item-img"></div>
<span class="list__item-caption">Very/long/word</span>
</li>
<li class="list__item">
<div class="list__item-img"></div>
<span class="list__item-caption">Very/long/word</span>
</li>
<li class="list__item">
<div class="list__item-img"></div>
<span class="list__item-caption">Very/long/word</span>
</li>
<li class="list__item">
<div class="list__item-img"></div>
<span class="list__item-caption">Very/long/word</span>
</li>
<li class="list__item">
<div class="list__item-img"></div>
<span class="list__item-caption">Very/long/word</span>
</li>
</ul>
</div>
</div>
Have you tried using display: flex on .list element instead of using grid? Once that's set, you need to set a min-width property for the columns and by using flex-wrap: wrap the rows can collapse if the width of the items put together exceeds the full width of the container.
I've been researching for hours trying to figure out this issue. I want to display sidebar with 100% height responsively without position: fixed/absolute, is this possible to do it?
.sidebar {
height: 100%;
width: 40%;
border-right: none;
background: blue;
}
<div class="sidebar">
<p class="menu-section-head text-left">MENU UTAMA</p>
<nav class="sidebar-nav">
<ul>
<li>
<span>Menu 1</span>
<hr class="underline">
</li>
<li>
<span>Menu 2</span>
<hr class="underline">
</li>
<li>
<span>Menu 3</span>
<hr class="underline">
</li>
</ul>
</nav>
</div>
Use 100vh in place 100% in height.
.sidebar {
height: 100vh;
width: 40%;
border-right: none;
background: blue;
}
<div class="sidebar">
<p class="menu-section-head text-left">MENU UTAMA</p>
<nav class="sidebar-nav">
<ul>
<li>
<span>Menu 1</span>
<hr class="underline">
</li>
<li>
<span>Menu 2</span>
<hr class="underline">
</li>
<li>
<span>Menu 3</span>
<hr class="underline">
</li>
</ul>
</nav>
</div>
does switching from 100% to 100vh (viewer height) accomplish what you are looking for? % mimics the parent contianer, vh uses the window.
.sidebar {
height: 100vh;
width: 40%;
border-right: none;
background: blue;
}
<div class="sidebar">
<p class="menu-section-head text-left">MENU UTAMA</p>
<nav class="sidebar-nav">
<ul>
<li>
<span>Menu 1</span>
<hr class="underline">
</li>
<li>
<span>Menu 2</span>
<hr class="underline">
</li>
<li>
<span>Menu 3</span>
<hr class="underline">
</li>
</ul>
</nav>
</div>
I have coded up a bootstrap navbar, however when I tried to test its responsiveness, it does not create the little hamburger icon like it should...
I have an outer container for my page which has a fixed width, and an inner container for my fixed-top navbar of course. I have tried playing around with the containers, but it doesnt make the navbar responsive at all, so I must be missing something, or some code is conflicting with the responsive navbar??
fyi: the flex code doesnt seem to be working correctly in here :/
thanks guys
body {
padding-top: 102px;
background-color: #4d4d4d;
}
.container {
width: 1530px;
margin: 0 auto;
margin-top: 0;
}
.navbar-brand {
font-size: 50px;
padding-top: 40px;
}
.custom-nav {
min-height: 90px;
font-size: 16px;
color: #000 !important;
background-color: #fff;
}
.dropdown-menu.user-list {
width: 100%;
border-radius: 0;
box-shadow: none;
border: 0;
background-color: #F8F8F8;
font-size: 15px;
}
ul.user-list li a {
padding: 8px 30px;
}
ul.user-list li.divider {
width: 200px;
margin: 0 auto;
}
.avatar-img {
padding: 0;
}
i.fa-angle-down {
font-size: 25px;
vertical-align: middle;
font-weight: lighter;
}
/* My styles */
li.dropdown {
height: 90px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.user {
margin-left: 50px;
margin-right: 20px;
}
.label {
border-radius: 100px;
position: absolute;
top: 25px;
right: 2px;
background-color: #ff5500;
}
.navbar-default .navbar-nav>li>a {
color: #777;
padding: 30px 19px;
}
li.dropdown.bell {
margin-right: 40px;
}
.nav>li.dropdown.bell>a:hover,
.nav>li.dropdown.bell>a:focus {
background-color: transparent;
}
#search-container {
width: 300px;
}
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<div class="container">
<nav class="navbar navbar-default navbar-fixed-top custom-nav">
<div class="container">
<a class="navbar-brand navbar-left" href="#">PAGE NAME</a>
<ul class="nav navbar-nav navbar-right">
</ul>
<ul class="nav navbar-nav navbar-right">
<!-- search bar added -->
<li class="dropdown">
<div class="input-group" id="search-container">
<input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2"><span class="glyphicon glyphicon-search"></span></span>
</div>
</li>
<li class="dropdown bell">
<a href="#" class="dropdown-toggle inbox" data-toggle="dropdown">
<img src="http://placehold.it/50x50" class=" avatar-img img-square">
<span class="label label-info">1</span>
</a>
<ul class="dropdown-menu bell" role="menu">
<li><span class="label label-warning">4:00 AM</span>Favourites Snippet
</li>
<li><span class="label label-warning">4:30 AM</span>Email marketing
</li>
<li><a href="#"><span class="label label-warning">5:00 AM</span>Subscriber focused email
design</a>
</li>
<li class="divider"></li>
<li>View All
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<img src="http://placehold.it/70x70" class=" avatar-img img-circle"><span class="user">Jacky Smith</span><i class="fa fa-angle-down"></i>
<!-- <span class="glyphicon glyphicon-menu-down"></span> -->
</a>
<ul id="menu" class="dropdown-menu user-list" role="menu">
<li>Action
</li>
<li class="divider"></li>
<li>Another action
</li>
<li class="divider"></li>
<li>Something else here
</li>
<li class="divider"></li>
<li>Separated link
</li>
<li class="divider"></li>
<li>One more separated link
</li>
</ul>
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-12">
<p>dfsjfhskfs</p>
<!-- <div class="chevron right">
</div>
<div style="height: 1em;">
</div> -->
</div>
</div>
</div>
</div>
You have a few issues that you need to fix.
You need a navbar-header, that includes the button that will be shown on small screen sizes.
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand navbar-left" href="#">PAGE NAME</a>
</div>
You need to wrap your menu content in a collapse div, that will be shown/hidden on button click on small screen sizes.
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
3. The container inside of your menu needs to be a container-fluid.
<nav class="navbar navbar-default navbar-fixed-top custom-nav">
<div class="container-fluid">
You need to make your container class have auto width for small screen sizes, otherwise it pushes the hamburger button off the screen. A bit of CSS with a media query can achieve this.
#media(max-width: 767px) {
.container {
width: auto;
}
}
Bootstrap Navbar Documentation
body {
padding-top: 102px;
background-color: #4d4d4d;
}
.container {
width: 1530px;
margin: 0 auto;
margin-top: 0;
}
#media(max-width: 767px) {
.container {
width: auto;
}
}
.navbar-brand {
font-size: 50px;
padding-top: 40px;
}
.custom-nav {
min-height: 90px;
font-size: 16px;
color: #000 !important;
background-color: #fff;
}
.dropdown-menu.user-list {
width: 100%;
border-radius: 0;
box-shadow: none;
border: 0;
background-color: #F8F8F8;
font-size: 15px;
}
ul.user-list li a {
padding: 8px 30px;
}
ul.user-list li.divider {
width: 200px;
margin: 0 auto;
}
.avatar-img {
padding: 0;
}
i.fa-angle-down {
font-size: 25px;
vertical-align: middle;
font-weight: lighter;
}
/* My styles */
li.dropdown {
height: 90px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.user {
margin-left: 50px;
margin-right: 20px;
}
.label {
border-radius: 100px;
position: absolute;
top: 25px;
right: 2px;
background-color: #ff5500;
}
.navbar-default .navbar-nav>li>a {
color: #777;
padding: 30px 19px;
}
li.dropdown.bell {
margin-right: 40px;
}
.nav>li.dropdown.bell>a:hover,
.nav>li.dropdown.bell>a:focus {
background-color: transparent;
}
#search-container {
width: 300px;
}
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<div class="container">
<nav class="navbar navbar-default navbar-fixed-top custom-nav">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand navbar-left" href="#">PAGE NAME</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
</ul>
<ul class="nav navbar-nav navbar-right">
<!-- search bar added -->
<li class="dropdown">
<div class="input-group" id="search-container">
<input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2"><span class="glyphicon glyphicon-search"></span></span>
</div>
</li>
<li class="dropdown bell">
<a href="#" class="dropdown-toggle inbox" data-toggle="dropdown">
<img src="http://placehold.it/50x50" class=" avatar-img img-square">
<span class="label label-info">1</span>
</a>
<ul class="dropdown-menu bell" role="menu">
<li><span class="label label-warning">4:00 AM</span>Favourites Snippet
</li>
<li><span class="label label-warning">4:30 AM</span>Email marketing
</li>
<li><a href="#"><span class="label label-warning">5:00 AM</span>Subscriber focused email
design</a>
</li>
<li class="divider"></li>
<li>View All
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<img src="http://placehold.it/70x70" class=" avatar-img img-circle"><span class="user">Jacky Smith</span><i class="fa fa-angle-down"></i>
<!-- <span class="glyphicon glyphicon-menu-down"></span> -->
</a>
<ul id="menu" class="dropdown-menu user-list" role="menu">
<li>Action
</li>
<li class="divider"></li>
<li>Another action
</li>
<li class="divider"></li>
<li>Something else here
</li>
<li class="divider"></li>
<li>Separated link
</li>
<li class="divider"></li>
<li>One more separated link
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-12">
<p>dfsjfhskfs</p>
<!-- <div class="chevron right">
</div>
<div style="height: 1em;">
</div> -->
</div>
</div>
</div>
</div>