We Keep Coding

Content hide in Navigation Bar - One Page Website

I am working on website called : denimistcompany.com
issue is that that menu is link with elements "id" , and now when someone clicks on about us , the main heading called Welcome to Denimist ... got hidden in navigation background.
is that possible we somehow start the the section from the point we like as all links is having same problem.
THanks

Keeping in mind that your navigation bar height is 90px and it's fixed, you have to use pseudo-element:
#aboutus::before {
content: "";
display: block;
position: relative;
margin-top: -90px;
}
Or alternatively can try this as well:
#aboutus {
padding-top: 90px;
margin-top: -90px;
}
Just checked on your website, and it works great.

bxslider next/back buttons appear at bootstrap nav menu

I'm developing a web application for a soccer team. I use HTML5+CSS with Bootstrap 3.0.3 and jQuery.
As first, on the top a menu appears, everything works fine.
So I decided to go to the news section where I added the jQuery bxslider plugin.
The problem is that when the menu is clicked and the dropdown appears, the bxslider buttons are still visible, which looks very disturbing and unuseful.
How to disable those two buttons while displaying the menu? Would a proper solution be to create an jQuery event which will hide slider temporarily or is there a CSS trick that I overlooked?
Demo: here
Resolution with the issue: 320 x 568 (small devices)
Default index.html:
After I click on the menu:

To resolve this, change the z-index of the arrows like so :
.bx-wrapper .bx-controls-direction a{z-index:100};

Give .navbar-fixed-top to z-index:99999; will make arrow in visible when menu open.
.navbar-fixed-top{
z-index:99999;
}

By Default navbar with fixed top have z-index of 1030 as you can see from below code
.navbar-fixed-top, .navbar-fixed-bottom {
position: fixed;
right: 0;
left: 0;
z-index: 1030;
}
and carousel arrow have z-index 9999;
.bx-wrapper .bx-controls-direction a {
position: absolute;
top: 50%;
margin-top: -16px;
outline: 0;
width: 32px;
height: 32px;
text-indent: -9999px;
z-index: 9999;
}
Now You just have to increase the z-index>9999 for your navbar for this to work by adding some custom style to overrride the default z-index of navbar.
e.g
.navbar-fixed-top{
z-index: 10001;
}

How to close responsive fullscreen menu when user clicks on a link?

I have one of those responsive menus on my one-pager site which brings up a transparent fullscreen menu when the hamburger icon is clicked. The fullscreen menu closes when user clicks the close button (X) at the top right, so everything works fine. But since most of my site is one-page, all the links in the menu are also links within the same page. When user clicks one of those links, the page jumps there as intended but the transparent fullscreen menu still stays fullscreen as it is...
The menu should disappear when user clicks on a link exactly as it does when user clicks the close button. This is the problem I'm trying to solve and I'm sure it requires just a few lines of Javascript but I'm not so fluent in JS.
This is the website:
http://www.artegradesign.com
Here's the related code (maybe there's more to it, not sure):
HTML
<div class="menu-btn"></div>
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
</nav>
CSS
.menu-btn {
cursor: pointer;
height: 60px;
width: 60px;
display: inline;
z-index: 99;
position: absolute;
top: 2px;
right: 5%;
}
.close-btn {
position: fixed;
z-index: 100;
}
nav {
position: fixed;
top: -1600px;
left: 0;
right: 0;
background-color: rgba(0,26,51,0.95);
transition: all 0.5s;
color: white;
min-height: 100%;
z-index: 99;
}
.open {
top: 0;
}
JS
$(document).ready(function(){
$('.menu-btn').click(function(){
$('nav').toggleClass('open');
$(this).toggleClass('close-btn');
$('.container').toggle();
})
})
Update: I managed to close the fullscreen menu (with the js below) when clicking on a link, but it also makes the menu button disappear entirely. So I still need a hero to bring it back!
$(document).ready(function(){
$('nav li a').click(function(){
$('nav').toggle();
})
})
Thanks!

Seems less ideal how the click event is being handled, but because you are just looking for a toggle when you click it (for both closing and opening), you can just tie a link click in with triggering the menu click like so:
$('nav li a').on('click', function(){
$('.menu-btn').trigger('click');
});
I do suggest using an ID or a specific class for your nav, however. It could easily break if you added a nav element with an unordered link list anywhere else in the site.

How to make collapsible sidebar sticky?

I am trying to make the sidebar in this example sticky when scrolling, for both situations (when you are using a big display and the sidebar is visible, as well as on mobile devices when you toggle the menu manually). I have followed various similar answers on this site but I could not apply them to my particular situation. For example, the following did not help:
#sidebar.affix-top {
position: static;
margin-top:30px;
width:228px;
}
#sidebar.affix {
position: fixed;
top:70px;
width:228px;
}
Any ideas how to do it? Thanks!

adding
#sidebar .nav {
width: 95%;
position:fixed;
}
works for me
fiddle: http://jsfiddle.net/PrakharThakur/afrbbsh3/

Foundation 5 responsive sub menu dropdown

I am using the Foundation 5 framework for a WordPress website and need to improve the responsive menu. My menu will have a lot of drop down items which as it stands at the moment will all sit on top of each other when viewed on a smaller screen. I need some sort of accordion effect with a plus button to drop down each item. If this is possible with the Foundation menu can anyone point me in the right direction?
Here is a screenshot which shows what I need:

Let´s try this one (you need to play with the rules position and font size):
note: Without code is a shoot in the dark :)
.top-bar-section .has-dropdown > a:after {
content: "+";
display: block;
height: auto;
position: absolute;
right: 0;
top: 50%;
width: 0;
font-weight:bold;
}