Attached navbar has buggy behavior
So, I tried to customize the navbar, which is set right below the border around the page. I made an illustration to help explain:
On the page, I have a border (blue) around the entire page, then a navbar (red) that scrolls off the page until it hits the top of the navbar and gets stuck until the user scrolls back ...
My problem is that it seems like something is tossing my nav and its content to the right when js kicks in (when the user scrolls to the top border), making the obvious dash move.
Here is my html:
<html>
<head>
<title>Title</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<%= yield :scss %>
<div class="container-main <%= layout %>">
<nav class="main-nav">
<a class="navbar-brand" href="#">
<i class="fa fa-bars menu-icon"></i>
</a>
</nav>
<div class="container">
<%= yield %>
</div>
</div>
<%= yield :js %>
</body>
</html>
Does anyone know how to fix this? I'm not sure if its a bootable thing to override or what ... I tried to set the navbar-left margin to equalize motion, but ended up messing up the initial columns I set. any advice appreciated!
Here's my CSS:
.main-nav {
text-align: center;
margin-top: 50px;
background: transparent;
height: 50px;
z-index: 150;
margin-bottom: -50px;
}
.main-nav-scrolled {
position: fixed;
width: 100%;
top: 0;
// margin-left: -35px; not working
}
.main-nav,
.container {
position: relative;
}
.container {
background: transparent;
padding: 100px
}
.layout-with-border {
background: #eaeae8; //fixed for all product pages
border: 35px solid #dad4c9; //theme color light
}
.layout-without-order {
}
Here is my JS:
var mn = $(".main-nav");
mns = "main-nav-scrolled";
var BorderWidth = 35;
$(window).scroll(function() {
if( $(this).scrollTop() > BorderWidth ) {
mn.addClass(mns);
} else {
mn.removeClass(mns);
}
});
Sorry this is a bit confusing how to post so many parts since I'm so newbie. I created a helper for the border layout:
module ApplicationHelper
def layout
if params[:controller] == 'products' && params[:action] == 'show'
'layout-with-border'
elsif params[:controller] == 'volumes' && params[:action] == 'show'
'layout-with-border'
else
'layout-without-border'
end
end
end
source to share
Your code is very close to what you need.
The failure occurs due to a change from position: relative
to position: fixed
to .main-nav
.
The widths of fixed elements are calculated relative to the viewport, not the parent container.
First, zero the margin by body
(if necessary, depends on your design).
For illustration, I've added a 35px blue border on the .main-container
.
Then for, .main-nav-scrolled
set the left and right offsets to 35px to set the correct block width nav
, you don't need to set the width value.
Note. The content .container
jumps up 50 pixels when the scroll hits the launch point. To stop this, you need to add a 50px padding to .container-main
or 50px top margin before .container
when you fix the element nav
. I chose to add additions, see jQuery changes below.
var mn = $(".container-main");
mns = "main-nav-scrolled";
var BorderWidth = 35;
$(window).scroll(function() {
if ($(this).scrollTop() > BorderWidth) {
mn.addClass(mns);
} else {
mn.removeClass(mns);
}
});
body {
margin: 0;
}
.container-main {
border: 35px solid lightblue;
}
.main-nav {
text-align: center;
margin-top: 0px;
background: yellow;
height: 50px;
}
.main-nav-scrolled .main-nav {
position: fixed;
top: 0;
left: 35px;
right: 35px;
z-index: 1;
}
.main-nav-scrolled.container-main {
padding-top: 50px;
}
.container {
position: relative;
background: beige;
padding: 100px;
height: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-main">
<nav class="main-nav">
<a class="navbar-brand" href="#">
<i class="fa fa-bars menu-icon">Icon</i>
</a>
</nav>
<div class="container">container content...</div>
</div>
source to share
define max-width:
for your element nav or parent wrapper.
You should have a div wrapping around the middle of the page outside of the full width wrapper - which is what I see. For example, something like below.
#middle_page_wrap {
width: 960px;
max-width: 960px;
margin: 0 auto;
position: relative;
}
And like:
<div class="container-main">
<div id="middle_page_wrap"><!-- nest -->
<nav class="main-nav">
<a class="navbar-brand" href="#">
<i class="fa fa-bars menu-icon"></i>
</a>
</nav>
<!-- etc -->
Also, yes, I agree with the comments; not sure what is playing here JS or dynamic tool or other languages. But sounds like a pure CSS thing
If that doesn't work, then because of the code you are not showing, you need to create a demo / jsfiddle.
source to share