We Keep Coding

Semanticui sticky menu with visible sidebar

I cannot make work a semanticui sticky menu when I set a visible sidebar. There is a JSFiddle explaining the issue. The top menu glitches and does not seem to follow the scroll.
<div class="example">
<div class="ui visible inverted left vertical sidebar menu" id="left-menu">
<a class="item">Option 1</a>
</div>
<div class="pusher">
<div class="ui sticky menu" id="top-menu">
<a class="item">Menu</a>
</div>
<div style="height:3000px; background-color:red;">
Example with ui sticky menu
</div>
</div>
</div>
<script>$(function(){ $('#top-menu').sticky(); });</script>
Do you know how to fix this?

Issue with html and javascript (smooth scrolling)

I tried adding smooth scrolling to my website. After copying the javascript and jquery from this website: http://www.dwuser.com/education/content/quick-guide-adding-smooth-scrolling-to-your-webpages/ I added the tags for the smooth scrolling. The smooth scrolling works for everything except one button on the nav bar. This is the code:
<nav id="nav">
<div class="navbar">
<div class="brand">hbvhaf</div>
<ul>
<li><span>about</span></li>
<li><span>bvdsvudva</span></li>
<li><span>contact</span></li>
</ul>
</div><!-- navbar -->
</nav>
The one button that doesn't smooth scroll is the one that has a div class of "brand". The div is used to specifically style that button in css. Any ideas.

I know that this is a bit of a hack, but why don't you just add this to the top of the page:
<div name="top"></div>
And then change your code to:
<nav id="nav">
<div class="navbar">
<div class="brand">hbvhaf</div>
<ul>
<li><span>about</span></li>
<li><span>bvdsvudva</span></li>
<li><span>contact</span></li>
</ul>
</div><!-- navbar -->
</nav>
Edit for author, example of it working properly:
<div name="top">I am the top of the page.</div>
Go To Contact Form
<div style="height:200%"></div>
<div name="contact">contact</div>
Back to top
<div style="height:200%"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="smoothscroll.js"></script>

Bootstrap - Sidebar customization

I'm currently working on a website project using bootstrap for the first time and am experiencing a little problem I think veterans like you can help me with :)
The website has a top menu bar (fixed) which change when displayed on a small screen (like a mobile phone) - with a toggle button that display a sidebar menu.
I'm just trying to get access to the CSS underneath that sidebar but can't modify it without modifiying the main manu bar as well.
I don't know which class CSS i have to create/modify to get what I need :/
<nav class="navbar navbar-default redq" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse">
and a litte below...
<!-- Collect the nav links, forms, and other content for toggling -->
<!-- <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> -->
<div class="collapse navbar-collapse">
<a class="navbar-brand mobile pull-left" href="index.html#home" style="font-size:3vw;">MySite 2016</a>
<a class="mobile-menu-close"><i class="fa fa-chevron-right"></i></a>
<ul class="nav navbar-nav nav-list">
Any help or tip would be very much appreciated !
Thanks in advance for your help guys ;D

I identified the issue and hope it will be more understandable that my previous piece of code.
The goal is actually to change the collapse sidebar width but only on mobile version
Putting the style directly in the style attritube works perfectly
<div class="collapse navbar-collapse" style="width:100px;">
But if I try to put it in a CSS class definition, it doesn't work anymore
.collapse.navbar-collapse {
width: 100px;
}
Why is that happening !?
I really can't use the inline declaration because I need the use of #media in order to target only the mobile menu.

That's it, I found it !
I post here the answer for anyone looking for the same result :D
#mobile-menu-wrap
{
width: 10em;
}
This ID is found in script.js and give you full access to the sidebar (mobile) content ;)

JS: Script for sticky navbar not running

For some reason on my webpage, the javascript for a sticky navbar isn't running at all. Here is the jsfiddle. The navbar (in bright orange) runs across the top of the page - at the base of header. The script is set to make the navbar visible after the user scrolls past a point and then past a further point, it is meant to make it fixed to the top of the viewport with the help of .offset().top;.
I've tried out the exact same script in a similar implementation and it works. Would appreciate anyone's help pointing out the glitch.

the problem is the z-index in your html Layout
<header>
<div class="mainheader">
<img class="logo" src="images/logoinner.png">
<img class="detail1" src="images/detail1.png">
</div>
<div class="subheader"></div>
<div id="menu-wrapper">
<nav id="menu">
<div class="menu">
<ul class="menu">
<li>
<img class="logoflag" src="images/logoflag.png">
</li>
</ul>
</div>
</nav>
</div>
</header>
<div class="contentwrap">
.....
</div>
You only set the z-index of the menu wrapper div but the z-index of the header was still smaller than the z-index of your div class="contentwrap". So just increase the z-index of the header and it should work.
here is a fixed fiddle:
https://jsfiddle.net/uh6e88n3/6/

Multiple sticky footers

Is there a solution to have multiple sticky footers, one per section/div ?
Assume the following example:
<nav id="stickyHeaderMenu">
<!-- link_to section#one -->
<!-- link_to section#two -->
<!-- link_to section#three -->
</nav>
<section id="one">
<div class="content"> </div>
<nav id="footerNavOne"> </nav>
</section>
<section id="two">
<div class="content"> </div>
<nav id="footerNavTwo"> </nav>
</section>
<section id="three">
<div class="content"> </div>
<nav id="footerNavThree"> </nav>
</section>
The idea is to have one sticky header menu, and one sticky menu for the section in view at bottom of page. User scrolling down causes footer to change, depending on the section in view.
Note that sections are really tall, and take some scrolling to see all of it.
So when viewing section#one, nav#footerNavOne is the sticky footer. Once user reaches end of section#one, nav#footerNavOne sticks to it and goes up and out of page with it. Now section#two comes up, and nav#footerNavTwo becomes the new sticky footer.
update: I found the following, which looks pretty efficient: sticky-kit.js.
It sticks a div to the top of its parent. see this jsfiddle, showing it done on above example.
Is it possible to do the opposite: (stick the div to the bottom of parent) ?