CSS - Weird flex + bootstrap's dropdown-menu interaction on mobile < 767px - css

Question

I've been stuck for about a week on this and i really need help. Searched everywhere but to no avail. The problem i am facing is that my flex items get pushed horizontally when i open a dropdown-menu that's togglable from another item on the list. Screenshot describing the problem : http://imgur.com/H6FUf3o
I am using rails and react.
the header.html.erb
<nav data-behavior="animated-navbar" class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid col-md-10 col-md-offset-1">
<div class="navbar-header">
<%= link_to root_path, class: "navbar-brand", id: "logo" do %>
<%= image_tag('logo.png', width: 55) %>
<% end %>
</div>
<ul class="nav navbar-nav filter-links">
<li>
<% if user_signed_in? %>
<%= nav_link_to "Home", root_path %>
<% else %>
<%= nav_link_to "Staff pick", root_path %>
<% end %>
</li>
<li><%= nav_link_to "Top stories", top_stories_path %></li>
<% if user_signed_in? %>
<li><%= nav_link_to "Bookmarks", dashboard_bookmarks_path %></li>
<% else %>
<li>Bookmarks</li>
<% end %>
</ul>
<div class="folding-nav">
<ul class="nav navbar-nav navbar-right">
<li class="main-searchbar">
<%= react_component('SearchContainer') %>
</li>
<% if user_signed_in? %>
<li class="new-post-button"><%= link_to "Write a story", new_post_path, class: "button" %></li>
<li id="notifications">
<%= react_component('NotificationsContainer', {}) %>
</li>
<%= render 'layouts/avatar_dropdown' %>
<% else %>
<li class="new-post-button"><%= link_to "Write a story", new_post_path, class: "button", data: { behavior: 'trigger-overlay' } %></li>
<li class="sign-in-button"><%= link_to "Sign in / Sign up", new_user_session_path, class: 'button green-border-button', data: { behavior: 'trigger-overlay' } %></li>
<% end %>
</ul>
</div>
</div>
</nav>
the header.scss
body {
padding-top: 0;
}
.container-fluid, .container {
padding: 0;
}
.navbar-header {
padding: 8px 0;
border-bottom: 1px solid $super-light-gray;
}
.navbar-fixed-top {
position: relative;
}
.navbar-nav, .navbar-nav > li {
display: inline-block;
}
.navbar-nav {
margin: 5 10px;
}
.navbar-nav > .open > a {
background-color: $white !important;
}
.navbar-nav > li > a {
padding: 7px 24px;
}
/** Navbar animation **/
nav.navbar {
transition: 0.3s transform;
&.is-inView {
transform: translateY(0);
}
&.is-hidden {
transform: translateY(-100%);
}
}
.navbar-admin {
ul.nav.navbar-nav > li > a {
color: #fff;
border: none;
}
}
nav.navbar {
margin-bottom: 0;
border-radius: 0;
border-color: $super-light-gray;
&.navbar-default {
background-color: $greenlight;
}
.navbar-brand {
height: 40px;
}
.regular-nav {
color: $white;
}
.filter-links {
margin-left: 9px;
li > a {
text-decoration: none;
font-family: 'CaviarBI';
font-size: 18px;
color: $white;
font-weight: 400;
&.active {
font-size: 25px;
}
}
}
.folding-nav {
position: absolute;
top: 3px;
right: 0;
}
.navbar-right {
margin: 0;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-end;
align-content: stretch;
align-items: flex-start;
}
.navbar-right > li {
order: 0;
flex: 0 1 auto !important;
align-self: auto !important;
}
.new-post-button {
display: none;
}
.new-post-button a {
transition: all .1s;
color: $light-gray;
font-family: 'Caviar';
font-weight: 600;
background-color: $white;
}
.new-post-button:hover {
a {
color: $greenlight;
border-color: $border-hover-color;
background-color: $white;
}
}
.new-post-button,
.sign-in-button {
margin-top: 5px;
margin-right: 10px;
.button {
padding: 0.6em 1em 0.7em 1em;
}
}
.account {
padding-top: 5px;
}
a.avatar-wrapper {
padding: 0;
display: inline;
float:none;
margin: 3px 15px 0 10px;
}
a.avatar-wrapper img.avatar-image {
border: 1.5px solid $border-color;
transition: all .1s;
}
a.avatar-wrapper:hover img.avatar-image, .open a.avatar-wrapper img.avatar-image {
border: 1.5px solid $border-hover-color;
}
.nav-dropdown {
background: #fff;
#include border-radius($popover);
box-shadow: 0 1px 2px rgba(0,0,0,.25),0 0 1px rgba(0,0,0,.35);
border: none;
top: 134%;
right: 20px;
a {
color: $light-font-color;
&:hover {
background-color: $white;
color: rgba(0,0,0,0.8);
}
}
.nd-main {
font-size: 16px;
font-weight: 100px;
line-height: 1.4;
}
.nd-sub {
font-size: 14px;
font-weight: 100;
line-height: 1.4;
}
.dropdown-arrow-top {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
z-index: 20;
border-bottom: 10px solid #fff;
position: absolute;
right: 10px;
top: -10px;
}
.dropdown-arrow-bottom {
width: 0;
height: 0;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
z-index: 10;
border-bottom: 11px solid rgba(0, 0, 0, 0.11);
position: absolute;
right: 8px;
top: -11px;
}
}
#logo {
width: 128px;
margin-left: 15px;
img {
top: 5px;
height: 31px;
}
span {
right: 0;
text-transform: uppercase;
font-weight: bold;
}
}
}
/* Small devices (tablets, 768px and up) */
#media (min-width: $screen-sm-min) {
body {
padding-top: 67px;
}
.navbar-header {
border-bottom: none;
}
.navbar-fixed-top {
position: fixed;
}
nav.navbar {
padding: 5px 0;
.filter-links {
margin-top: 16px;
margin-left: 0;
}
#logo {
width: 138px;
margin-left: 0;
}
.new-post-button {
display: inline-flex;
}
}
}
/* Medium devices (desktops, 992px and up) */
#media (min-width: $screen-md-min) {
nav.navbar {
#logo {
width: 150px;
}
}
}
/* Large devices (large desktops, 1200px and up) */
#media (min-width: $screen-lg-min) {
}
#media (max-width: 767px){
.navbar-nav
.open .dropdown-menu {
background-color: $white;
box-shadow: 0 1px 2px rgba(0,0,0,.25),0 0 1px rgba(0,0,0,.35);
clear:both;
}
}
The dropdown-menu is for notifications, done with react. Here's what react renders :
render () {
return (
<div className="notification-container">
<a className={`dropdown-toggle ${this.state.newNotificationCount > 0 ? 'active' : ''}`}
onClick={() => this.handleMarkAsTouched()}
data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
{this.renderNotificationIcon()}
</a>
<div
className="dropdown-menu"
ref={(ref) => {this.dropdownRef = ref}}
>
<span className="dropdown-arrow-top"></span>
<span className="dropdown-arrow-bottom"></span>
<div className="notification-header">
<span>Notifications</span>
<a className="pull-right mark-all-as-read"
onClick={(e) => this.handleMarkAllAsRead(e)}>
Mark All as Read
</a>
</div>
<ul
onScroll={() => this.handleScroll()}
ref={(ref) => {this.notificationsListRef = ref}}
className="notifications-list">
{this.renderNotificationItems()}
{this.loadMoreButton()}
</ul>
</div>
</div>
);
}
lastly the notifications.scss :
#notifications {
a.dropdown-toggle.active {
background-color: rgba($accent-color, 0.8);
}
a.dropdown-toggle {
display: inline-block;
width: 40px;
height: 40px;
padding: 0;
margin-top: 5px;
position: relative;
background-color: white;
border: 1.5px solid $border-color;
transition: all .1s;
#include border-radius($round);
i.fa-bell-o,
span#new-notifications-count {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 1.3em;
}
#bell {
color: $light-font-color;
}
span#new-notifications-count {
color: $white;
}
}
a.dropdown-toggle:hover {
border: 1.5px solid $border-hover-color;
#bell{
color: $greenlight;
}
}
}
.notification-container {
.dropdown-menu {
width: 360px;
margin-top: 9px;
}
.notification-header {
padding: 4px 20px;
border-bottom: 1px solid $light-border-color;
color: $font-black;
}
.mark-all-as-read {
cursor: pointer;
color: $light-font-color;
&:hover,
&:active {
color: $accent-color;
}
}
.notifications-list {
overflow: hidden;
overflow-y: scroll;
max-height: 440px;
list-style: none;
padding: 0;
}
.load-more {
text-align: center;
}
.dropdown-arrow-top {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
z-index: 20;
border-bottom: 10px solid #fff;
position: absolute;
right: 10px;
top: -10px;
}
.dropdown-arrow-bottom {
width: 0;
height: 0;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
z-index: 10;
border-bottom: 11px solid rgba(0, 0, 0, 0.11);
position: absolute;
right: 8px;
top: -11px;
}
}
.notifications-list {
.avatar-image {
margin-right: 18px;
vertical-align: baseline;
}
li {
padding: 8px 0;
border-bottom: 1px solid $light-border-color;
&.unread-notification {
border-left: 2px solid $accent-color;
}
}
li > a {
color: $light-font-color;
display: block;
padding: 3px 0 3px 20px;
clear: both;
white-space: nowrap;
font-weight: normal;
transition: color 200ms;
&:hover {
color: $font-black;
}
}
.notification-metadata {
display: inline-block;
}
.fa {
margin-right: 8px;
}
.fa-heart-o {
color: #e81c4f;
}
.fa-user {
color: lightblue;
}
.fa-commenting-o {
color: $light-font-color;
}
}
// Bell Animation for "No Notifications"
.no-notifications {
margin: 10px 11px 8px 10px;
padding: 10px;
text-align: center;
position: relative;
.speech-bubble {
border: $border-color 1px solid;
padding: 10px;
#include border-radius($radius);
width: 170px;
margin: 0 auto;
color: $light-font-color;
}
.speech-arrow-top {
width: 0;
height: 0;
border-left: 11px solid transparent;
border-right: 11px solid transparent;
z-index: 20;
border-top: 10px solid #fff;
position: absolute;
right: 46.7%;
top: 36.5%;
}
.speech-arrow-bottom {
width: 0;
height: 0;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
z-index: 10;
border-top: 11px solid $border-color;
position: absolute;
right: 46.3%;
top: none;
}
.ringer {
margin: 0 auto;
width: 50px;
margin-top: 20px;
}
}
.bell-jar,.mouth,.eye{opacity:0.2;fill:$black;}
.blink, {
animation: blink 5s step-start 0s infinite;
}
#keyframes blink {
53% {
opacity: 0.2;
}
55% {
opacity: 0.0;
}
57% {
opacity: 0.2;
}
59% {
opacity: 0.0;
}
61% {
opacity: 0.2;
}
}
#media (max-width: 767px){
a.dropdown-toggle {
float:right;
}
}