I have built a menu bar using bootstrap. In the responsive mode, when the toggle menu is activated, the menu list items comes up quickly while the background container comes with a delay. Similarly when the toggle mode is deactivated, the container disappears while the menu items disappear with a delay. I have uploaded a video of this issue here: Video
Kindly, please let me know how to solve this problem.
It is because your #custom-collapse in the main navigation section of your css has the overflow set to visible remove that and it should work fine.
#custom-collapse {
border: none;
box-shadow: none;
}
If you put the overflow to visible to remove the scrollbar you should maybe try
.navbar-collapse.in {
overflow-y: visible;
}
Related
I cannot share the link to the webpage at the moment for confidental reasons but I will describe my issue as much as possible with the required code.
I am running the affix javscript from Bootstrap 3.3.6 and have built the page on anchor points so that the the menu stays affix right above a sub navigation.
My order of elements are:
[MAIN]
[HEADER]
[CAROUSEL]
[NAV]
[ABOUTBOX]
[CONTAINER/ROW]
[SUBNAV]
[LIBRARYBOX]
[CONTAINER/ROW2]
[SUBNAV2]
[CONTACTBOX]
[CONTAINER/ROW3]
[SUBNAV3]
[FOOTER]
[/MAIN]
The Affix JS I am using
//AffixJS
var tfv=$('#carousel-nmhead').offset().top+$('#carousel-nmhead').height();
$('#navbar-main').affix({
offset: {
top: tfv,
bottom: function () {
return (this.bottom = $('.footer').outerHeight(true));
}
}
});
CSS
.affix {
position: fixed;
top: 0;
width: 100%;
z-index: 10000;
}
.affix-top {
position: static;
}
.affix-bottom {
position: absolute;
}
The Issue
Essentially the nav drops correctly right above my sub navigation as planned once the "affix" class is set
The moment it is still on "affix-top" then on the first click/interaction with the menu - the nav overlaps the sub navigation and it is only on the subsequent click that the nav will reposition itself anew
Attempted solutions
Add
negative margins/paddings,
create new anchor divs within the main 3 content divs
tried debugging this different or fixed heights on the containers instead of min-height 0 !important;
other minute misc. troubleshooting
gone through google dev tools to inspect and play around with the JS HTML and CSS but no luck
I am the only one working on CSS/JS at the firm and the only colleague with similar exp cannot comprehend why the Affix is not working on the first click/interaction with the nav but only on the subsequent ones
If you click on ABOUT (nav has About/Library/Contact as links) the page bounces down to About and if you click ABOUT a second time it scrolls up and since that is when the affix commences, the sub navigations suddenly pops out underneath.
Afterwards with the "affix" class set if you click on LIBRARY or CONTACT then you correctly bounce between them showing the sub navigation each time.
However if you click on ABOUT anew then the state goes back to the top of the page and you have click on the button twice again so that the sub navi pops out underneath
If this can't be trouble shooted without code I'll try to make a blank page so that we can clearly see the impact
Thanks a lot!
I had a similar issue with an affix not updating until I clicked somewhere in the body. I fixed it by adding $(element).affix('checkPosition')
I've been working on a website and when testing it out on a VM the slide menu didn't work. I've since managed to replicate the error in newer versions of Chrome The page is
http://paperfromabc2xyz.co.uk/
When you shrink the screen size small enough to loose the main menu you'll get a NAV Burger icon. Clicking this should slide a menu in. The Javascript file is 'App.JS'
The click does not get caught, somehow because the span does not have dimensions (the :before element does not expand it).
Add this to your styles:
span.Burger{ display: inline-block; }
for a start use a library as Jquery to simplify your code; then put your javascript code in an $(document).ready(function () {} then then add to your css : span.Burger{ display: inline-block; }
The sticky menu on our site (http://462184.hs-sites.com/) is experiencing issues on some pages and not others.
For example the homepage, if you scroll half way down the page and try to use the menu, it hides momentarily. On the other hand we don't get this issue when on another page such as (http://462184.hs-sites.com/bookkeeping-plans).
Therefore I can only imagine it is some type of element on those pages conflicting?
Your support is greatly appreciated :)
Try removing overflow hidden from this element:
.header-container {
/* overflow: hidden; */
}
Just remove the line, or you can replace it with overflow:initial or overflow:auto;
I'm trying to get responsive menu working on Metis Admin
http://demo.onokumus.com/metis/
When the screen width is less than 768px, the side menu buttons get smaller which is fine but for the submenus it seems to expand to the right and it's invisible. It's position absolute and I've tried increasing z-index but it still does not show up.
I can see using css inspector that the submenu list is still there and working.
Is there a way to make it displayable?
There is an overflow:hidden in your main.css line 399.
Remove this
#menu {
/*other styles*/
overflow: hidden; /*remove this line*/
}
Now it should work as expected.
The dropdown menu of my blog gets behind the image slider on the main page.
http://allfacebookgames.blogspot.com/
How do I avoid it so the the dropdown menu is not covered?
For your information, the dropdown menu does not require any javascript and solely depends upon css.
Thank you.
This will fix it:
#menu-wrapper {
position: relative;
z-index: 40;
}
To show that it works: http://www.csspivot.com/t0Sj3
Set position:relative and z-index:9999 on the #menu-wrapper rule