undefined
Reputation: 169
align flex items only in the 'second row' created by flex-wrap:wrap
I would like to align items (the number of items can vary) which are pushed into the second row by flex-wrap:wrap when the window size of the browser is resized below 900px to the right side.
I used flex-wrap:wrap because the initial problem was, that the whole menu bar was too wide when the browser window got too small.
Wrap solved that problem but then the collapsing sub menu 'stick' behind the main elements of the menu bar (e.g. Link 3.1 behind Link 7)
If anyone could provide a better solution than flex-wrap:wrap I would gladly appreciate that.
I tried to solve that issue with different versions of justify-content. But it either didn't work at all or the whole menu bar was affected.
So the main question is: How to align only those items to the right side which are in the 'second flex row'?
I also created a pen:
[but I cant poste more than two links, so I'm going to post the pen into the comments]
jQuery(document).ready(function($) {
// add JS-classes into the HTML-Tag
$('html').addClass('js');
// add classes for sub menus and sub menus toggle button
$(".site-nav li > ul").parent('li').addClass('has-sub-menu');
$(".site-nav li > ul").addClass('sub-menu');
// create button for expand- und collapse the menu and render it into the header
var create_toggle_nav_button = ['<div class="toggle-site-nav">Menu</div>'].join("");
$("header").append(create_toggle_nav_button);
// create button for expand- und collapse the sub menu for mobile view and add them to all sub menus
var create_sub_toggle_button = ['<span class="toggle-sub-menu"></span>'].join("");
$(".has-sub-menu > a").after(create_sub_toggle_button);
// define variables
var $menu = $('.site-nav'),
$toggle_nav = $('.toggle-site-nav'),
$toggle_sub_menu = $('.toggle-sub-menu');
// collapse and expand function of the main menu
$toggle_nav.click(function(e) {
e.preventDefault();
$menu.slideToggle();
});
// collapse and expand function of the drop down menu for mobile view
$toggle_sub_menu.click(function(e) {
e.preventDefault();
var $this = $(this);
$this.toggleClass('active').next('ul').slideToggle();
});
// display hidden elements again, when browserwindow is resized by user
$(window).resize(function() {
var w = $(window).width();
if (w > 900) {
$('.site-nav').removeAttr('style');
$('.sub-menu').removeAttr('style');
}
});
// collapse navigation automatically to the left, when it run out of the viewport
$(".site-nav .has-sub-menu").on('mouseenter mouseleave', function(e) {
var nav_element = $('ul:first', this);
var element_offset = nav_element.offset();
var element_offset_left = element_offset.left;
var element_width = nav_element.width();
var viewport_width = $(window).width();
var element_in_viewport = (element_offset_left + element_width <= viewport_width);
if (!element_in_viewport) {
$(this).addClass('sub-left');
} else {
$(this).removeClass('sub-left');
}
});
});* {
margin: 0;
padding: 0;
list-style: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
body::after {
content: '';
position: fixed;
bottom: 1em;
right: 1em;
opacity: 0.5;
font-size: 0.8em;
z-index: 9999;
}
header {
width: 100%;
background: white;
}
.container {
max-width: 1000px;
margin: 0 auto;
}
.logo {
display: block;
width: 100%;
padding: 1em;
text-decoration: none;
color: gray;
/* ? */
}
.site-nav {
z-index: 9999;
}
.site-nav>ul {
display: flex;
flex-direction: row;
justify-content: center;
align-items: stretch;
flex-wrap: wrap;
}
.site-nav li {
display: inline-block;
flex-wrap: wrap;
width: auto;
padding: 0;
position: relative;
z-index: 9999;
}
.site-nav a {
display: inline-flex;
align-content: stretch;
padding: 1em;
white-space: nowrap;
text-decoration: none;
height: 100%;
width: 100%;
color: white;
/* text color of all */
background: #5a595a;
/* background color main nav Link 1 */
border-top: 1px solid rgba(0, 0, 0, 0.5);
z-index: 9999;
}
.site-nav a:hover {
background: rgba(0, 0, 0, 0.4);
/* mouseover color Link 1 and Link 1.1 */
}
.js .site-nav {
display: none;
}
.js .sub-menu {
display: none;
position: absolute;
top: 100%;
left: 0px;
}
.js .sub-menu .sub-menu {
top: 0px;
left: 100%;
}
.js .has-sub-menu {
position: relative;
top: 100%;
left: 0px;
}
.sub-menu li:last-of-type {
padding-bottom: 0;
}
.sub-menu a {
background: #676567;
/* background color menu 2.1 only */
}
.sub-menu .sub-menu a {
background: #747274;
/* background color menu 2.1.1 only */
}
.sub-menu .sub-menu a:hover {
background: rgba(0, 0, 0, 0.4);
/* mouseover color Link 1 and Link 1.1 */
}
/* toggles */
.toggle-site-nav {
background: #5a595a;
/* background color of menu button when resized */
display: block;
position: absolute;
right: 0;
top: 0;
padding: 1em;
color: white;
/* text color of the word menu in menu button when resized */
cursor: pointer;
z-index: 9999;
}
.toggle-site-nav:hover {
background: rgba(0, 0, 0, 0.5);
/* mouseover color of menu button when resized */
}
.toggle-sub-menu {
display: none;
}
.js .toggle-sub-menu {
display: flex;
position: absolute;
align-content: center;
right: 0em;
top: 1.05em;
/* hight of the borders */
background: #817e81;
/* backgound of annoying squares when resized */
height: 15px;
width: 15px;
cursor: pointer;
z-index: 10000;
}
.js .toggle-sub-menu.active {
background: #DCDCDC;
/* color of annoying square after clicking on it when resized */
}
.toggle-sub-menu:hover,
.toggle-sub-menu.active:hover {
background-color: rgba(0, 0, 0, 0.4);
/* mouseover of annoying squares when resized */
}
@media screen and (min-width:900px) {
.logo {
width: auto;
float: left;
}
.site-nav {
width: auto;
display: block !important;
}
.site-nav a {
border: none;
}
.site-nav li {
width: auto;
padding: 0;
}
.site-nav li:hover {
background: rgba(52, 50, 52, 1);
/* mouseover background color of all menu */
}
.has-sub-menu a {
padding-right: 2em;
/* check this value */
}
.has-sub-menu:after {
/* check this for editing the stripes */
display: flex;
content: '';
position: absolute;
align-content: center;
top: 1.2em;
right: 0;
width: 0.5em;
height: 25%;
background: #817e81;
/* color of stripes in main menu when it has submenu */
}
/* sub menu */
.site-nav li:hover>.sub-menu {
display: block;
position: absolute;
width: 300px;
padding: 0 25px 25px 25px;
left: -25px;
}
.sub-menu {
display: none;
}
.sub-menu li {
width: 100%;
}
.sub-menu>a {
width: 100%;
display: block;
}
.has-sub-menu .has-sub-menu:after {
background: #817e81;
/* color of stripes of Link 2.1 menu when it has submenu */
}
.has-sub-menu .has-sub-menu:hover .sub-menu {
display: block;
position: absolute;
width: 300px;
padding: 0 25px 25px 25px;
left: 224px;
top: 0px;
}
.toggle-site-nav,
.toggle-sub-menu {
display: none !important;
}
/* navigations items, which collapse to the left */
.sub-left>.sub-menu {
left: auto;
right: 0;
}
.site-nav .sub-menu .sub-left>.sub-menu {
left: -275px;
}
}
@media (max-width :800px) {
.site-nav {
z-index: 999999999999999999;
margin-top: 25px;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<div class="container">
<a href="#" class="logo"></a>
<nav class="site-nav">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a>
<ul>
<li><a href="#">Link 2.1</a></li>
<li><a href="#">Link 2.1</a>
<ul>
<li><a href="#">Link 2.1.1</a></li>
<li><a href="#">Link 2.1.2</a></li>
<li><a href="#">Link 2.1.3</a></li>
<li><a href="#">Link 2.1.4</a></li>
</ul>
</li>
<li><a href="#">Link 2.1</a></li>
</ul>
</li>
<li><a href="#">Link 3</a>
<ul>
<li><a href="#">Link 3.1</a></li>
<li><a href="#">Link 3.2</a></li>
<li><a href="#">Link 3.3</a></li>
<li><a href="#">Link 3.4</a></li>
<li><a href="#">Link 3.5</a></li>
</ul>
</li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
<li><a href="#">Link 7</a>
<ul>
<li><a href="#">Link 7.1</a></li>
<li><a href="#">Link 7.2</a></li>
<li><a href="#">Link 7.3</a>
<ul>
<li><a href="#">Link 7.3.1</a></li>
<li><a href="#">Link 7.3.2</a></li>
<li><a href="#">Link 7.3.3</a></li>
<li><a href="#">Link 7.3.4</a></li>
<li><a href="#">Link 7.3.5</a></li>
</ul>
</li>
<li><a href="#">Link 7.4</a></li>
<li><a href="#">Link 7.5</a></li>
</ul>
</li>
<li><a href="#">Link 8</a></li>
</ul>
</nav>
</div>
</header>Upvotes: 0
Views: 1440
Answers (1)
sol
Reputation: 22919
Add the following to site-nav:
@media screen and (min-width: 900px) {
.site-nav {
width: auto;
display: flex;
}
}
Then you can apply margin-auto to ul, and ajdust justify-content to flex-end (which will right align the li.
You may need to tweak margin-top property on site-nav to align things properly.
jQuery(document).ready(function($) {
// add JS-classes into the HTML-Tag
$('html').addClass('js');
// add classes for sub menus and sub menus toggle button
$(".site-nav li > ul").parent('li').addClass('has-sub-menu');
$(".site-nav li > ul").addClass('sub-menu');
// create button for expand- und collapse the menu and render it into the header
var create_toggle_nav_button = ['<div class="toggle-site-nav">Menu</div>'].join("");
$("header").append(create_toggle_nav_button);
// create button for expand- und collapse the sub menu for mobile view and add them to all sub menus
var create_sub_toggle_button = ['<span class="toggle-sub-menu"></span>'].join("");
$(".has-sub-menu > a").after(create_sub_toggle_button);
// define variables
var $menu = $('.site-nav'),
$toggle_nav = $('.toggle-site-nav'),
$toggle_sub_menu = $('.toggle-sub-menu');
// collapse and expand function of the main menu
$toggle_nav.click(function(e) {
e.preventDefault();
$menu.slideToggle();
});
// collapse and expand function of the drop down menu for mobile view
$toggle_sub_menu.click(function(e) {
e.preventDefault();
var $this = $(this);
$this.toggleClass('active').next('ul').slideToggle();
});
// display hidden elements again, when browserwindow is resized by user
$(window).resize(function() {
var w = $(window).width();
if (w > 900) {
$('.site-nav').removeAttr('style');
$('.sub-menu').removeAttr('style');
}
});
// collapse navigation automatically to the left, when it run out of the viewport
$(".site-nav .has-sub-menu").on('mouseenter mouseleave', function(e) {
var nav_element = $('ul:first', this);
var element_offset = nav_element.offset();
var element_offset_left = element_offset.left;
var element_width = nav_element.width();
var viewport_width = $(window).width();
var element_in_viewport = (element_offset_left + element_width <= viewport_width);
if (!element_in_viewport) {
$(this).addClass('sub-left');
} else {
$(this).removeClass('sub-left');
}
});
});* {
margin: 0;
padding: 0;
list-style: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
body::after {
content: '';
position: fixed;
bottom: 1em;
right: 1em;
opacity: 0.5;
font-size: 0.8em;
z-index: 9999;
}
header {
width: 100%;
background: white;
}
.container {
max-width: 1000px;
margin: 0 auto;
}
.logo {
display: block;
width: 100%;
padding: 1em;
text-decoration: none;
color: gray;
/* ? */
}
.site-nav {
z-index: 9999;
}
.site-nav>ul {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: stretch;
flex-wrap: wrap;
margin: auto;
}
.site-nav li {
display: inline-block;
flex-wrap: wrap;
width: auto;
padding: 0;
position: relative;
z-index: 9999;
}
.site-nav a {
display: inline-flex;
align-content: stretch;
padding: 1em;
white-space: nowrap;
text-decoration: none;
height: 100%;
width: 100%;
color: white;
/* text color of all */
background: #5a595a;
/* background color main nav Link 1 */
border-top: 1px solid rgba(0, 0, 0, 0.5);
z-index: 9999;
}
.site-nav a:hover {
background: rgba(0, 0, 0, 0.4);
/* mouseover color Link 1 and Link 1.1 */
}
.js .site-nav {
display: none;
}
.js .sub-menu {
display: none;
position: absolute;
top: 100%;
left: 0px;
}
.js .sub-menu .sub-menu {
top: 0px;
left: 100%;
}
.js .has-sub-menu {
position: relative;
top: 100%;
left: 0px;
}
.sub-menu li:last-of-type {
padding-bottom: 0;
}
.sub-menu a {
background: #676567;
/* background color menu 2.1 only */
}
.sub-menu .sub-menu a {
background: #747274;
/* background color menu 2.1.1 only */
}
.sub-menu .sub-menu a:hover {
background: rgba(0, 0, 0, 0.4);
/* mouseover color Link 1 and Link 1.1 */
}
/* toggles */
.toggle-site-nav {
background: #5a595a;
/* background color of menu button when resized */
display: block;
position: absolute;
right: 0;
top: 0;
padding: 1em;
color: white;
/* text color of the word menu in menu button when resized */
cursor: pointer;
z-index: 9999;
}
.toggle-site-nav:hover {
background: rgba(0, 0, 0, 0.5);
/* mouseover color of menu button when resized */
}
.toggle-sub-menu {
display: none;
}
.js .toggle-sub-menu {
display: flex;
position: absolute;
align-content: center;
right: 0em;
top: 1.05em;
/* hight of the borders */
background: #817e81;
/* backgound of annoying squares when resized */
height: 15px;
width: 15px;
cursor: pointer;
z-index: 10000;
}
.js .toggle-sub-menu.active {
background: #DCDCDC;
/* color of annoying square after clicking on it when resized */
}
.toggle-sub-menu:hover,
.toggle-sub-menu.active:hover {
background-color: rgba(0, 0, 0, 0.4);
/* mouseover of annoying squares when resized */
}
@media screen and (min-width:900px) {
.logo {
width: auto;
float: left;
}
.site-nav {
width: auto;
display: flex !important;
}
.site-nav a {
border: none;
}
.site-nav li {
width: auto;
padding: 0;
}
.site-nav li:hover {
background: rgba(52, 50, 52, 1);
/* mouseover background color of all menu */
}
.has-sub-menu a {
padding-right: 2em;
/* check this value */
}
.has-sub-menu:after {
/* check this for editing the stripes */
display: flex;
content: '';
position: absolute;
align-content: center;
top: 1.2em;
right: 0;
width: 0.5em;
height: 25%;
background: #817e81;
/* color of stripes in main menu when it has submenu */
}
/* sub menu */
.site-nav li:hover>.sub-menu {
display: block;
position: absolute;
width: 300px;
padding: 0 25px 25px 25px;
left: -25px;
}
.sub-menu {
display: none;
}
.sub-menu li {
width: 100%;
}
.sub-menu>a {
width: 100%;
display: block;
}
.has-sub-menu .has-sub-menu:after {
background: #817e81;
/* color of stripes of Link 2.1 menu when it has submenu */
}
.has-sub-menu .has-sub-menu:hover .sub-menu {
display: block;
position: absolute;
width: 300px;
padding: 0 25px 25px 25px;
left: 224px;
top: 0px;
}
.toggle-site-nav,
.toggle-sub-menu {
display: none !important;
}
/* navigations items, which collapse to the left */
.sub-left>.sub-menu {
left: auto;
right: 0;
}
.site-nav .sub-menu .sub-left>.sub-menu {
left: -275px;
}
}
@media (max-width :800px) {
.site-nav {
z-index: 999999999999999999;
margin-top: 18px;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<div class="container">
<a href="#" class="logo"></a>
<nav class="site-nav">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a>
<ul>
<li><a href="#">Link 2.1</a></li>
<li><a href="#">Link 2.1</a>
<ul>
<li><a href="#">Link 2.1.1</a></li>
<li><a href="#">Link 2.1.2</a></li>
<li><a href="#">Link 2.1.3</a></li>
<li><a href="#">Link 2.1.4</a></li>
</ul>
</li>
<li><a href="#">Link 2.1</a></li>
</ul>
</li>
<li><a href="#">Link 3</a>
<ul>
<li><a href="#">Link 3.1</a></li>
<li><a href="#">Link 3.2</a></li>
<li><a href="#">Link 3.3</a></li>
<li><a href="#">Link 3.4</a></li>
<li><a href="#">Link 3.5</a></li>
</ul>
</li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
<li><a href="#">Link 7</a>
<ul>
<li><a href="#">Link 7.1</a></li>
<li><a href="#">Link 7.2</a></li>
<li><a href="#">Link 7.3</a>
<ul>
<li><a href="#">Link 7.3.1</a></li>
<li><a href="#">Link 7.3.2</a></li>
<li><a href="#">Link 7.3.3</a></li>
<li><a href="#">Link 7.3.4</a></li>
<li><a href="#">Link 7.3.5</a></li>
</ul>
</li>
<li><a href="#">Link 7.4</a></li>
<li><a href="#">Link 7.5</a></li>
</ul>
</li>
<li><a href="#">Link 8</a></li>
</ul>
</nav>
</div>
</header>Upvotes: 2
Related Questions
- Flex layout that puts one item on the first row and then wraps the rest on subsequent rows--all with vertically aligned columns
- Align first flex item to flex end
- Using Flexbox to align items inside or wrap items 2 by 2
- aligning columns in two rows of flex container
- Flexbox: 2nd row not aligned to 1st row
- How can I align X item on first row and X item for the next row in flexbox?
- Flexbox wrap - different alignment for last row
- Aligning two rows of flex items into columns
- Aligning flex items horizontally in a vertical flex container
- Aligning flex items without affecting other flex items