I have added the bootstrap collapse bar to my menu, it is working as it should, however since I have a unique nav bar that is in a fixed footer, it's not expanding and showing the nested content when the button is hit.
My educated guess is because it drops DOWN and there is no space under my footer as it's the lowest element on the page. Is there a way to make the direction go upward?
Here is a link to the site, so hopefully the source code will be enough. If not please let me know what you would like me to post on here.
It's also important to point out that I've tested this in the header and it does not function there either...
Related
How to let the elements in the page go under the sticky navbar when scrolling down and not above it and hide it ?
I copied the code from w3 schools to my Angular project but when i scroll down, all the elements go above the navbar and it hides it.
You need to probably add a z-index to the navbar to make it present on the foremost layer of the screen.
Have a look at this link for a much deeper information on the same.
https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
Introduction to clearify the task
I have a Navbar on the left side of my page. It has two levels for Items. When it's displayed in a small device, only the icons of the first level are shown. If you hover over it a dropdown of sub-items wil be shown on the right side of the bar. So far so good.
When the user uses a normal device the first-level-items should be displayed as dropdown-headers and the sub-items should expand under their parent-items on click. So I planned to set the sub-items-container under the main-items with height: 0px; and exband it with javascript-onclick and a css transition.
But as you can see the sub-items are hovering over the main item.
Question
How can i ensure that the subitemlist is between the main-items and not over it?
Additionally the solution shouldn't destroy the responsivness.
Note: I really want to make my own navbar, so using Bootstrap is not an option. Also i'm sorry if the code is not the best, it's the first try.
Code
I have put the whole thing in a jsfiddle
you cant put it in sidebaritem you have to put it below it
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?
I've already modified the overflow: hidden, to be set to overflow: auto, and this works quite well in the .header-container, although it seems that although this fixes the problem, there is still the issue when this is set that the images (such as the iPad at the top of the page, then overlaps the next section below it).
Thoughts on how to make sure either the image extends the container so it doesn't run into the next one, or how to fix this once and for all?
Just a thought, could this possibly be the Javascript, as I noticed that the menu bar when scrolled down doesn't dissapear until hovering over an active/Javascript link in the nav bar.
Your support is greatly appreciated :)
If you put a console.log in your call:
if ($(window).scrollTop() > 500 && getScreenWidth > 767) console.log("true")
else console.log("false")
Do you see in your console log the value changing when you scroll down at your homepage? And is this the same output as on your bookkeeping-plans page?
and does it also appear if you remove the slideup and slidetoggle functions?
$(this).parent().siblings('.hs-item-has-children').find('.hs-menu-children-wrapper').slideUp(250);
$(this).next('.hs-menu-children-wrapper').slideToggle(250);
This is what I can think of that is conflicting your code based on what I see on your website
I have a pretty simple site, which has a footer that is stuck to the bottom of the page and a content area that can scroll if the content is too long, and the end of the content will clear the footer like below. If the content fits in the page then no scrollbar is shown.
However, recently some CSS/php change which i can't for the life of me detect, has meant that the page no has this huge area under the bottom of the main content div which the user can scroll down like so.
Normal page view with everything looking as it should.
Here is the view for every page now, a user can scroll way below the end of the main content div to reveal this massive empty area underneath.
Having had this working nicely a day ago, Im not sure where to look next. I have check all of the css to make sure there are no syntax errors, I have checked all of the wordpress template files to make sure there are no unclosed divs or vice versa.
Does anyone know a starting point to look at to try and fix this? is there a common error for this type of thing? If you need a link to the stylesheet or html just ask (didnt copy as it was too long)
Not sure why you are using fade element. Definitely it's causing the issue.
Add this CSS to fix your scrolling problem by hiding it.
#fade { display: none; }
I have a fixed menu bar at the top of my site. I have a page that has inline linking by adding a hash tag to the URL making it jump to that particular element. The problem is the element it jumps to is hidden being this fixed menu bar. Is there a way to move the jump down a bit? Here is an example:
Example
Sadly you cannot do that via html, you'd need some JS, or even CSS, depending on your code.
Can you post a sample on jsfiddle.net ?
As a workaround, add another (hidden) element below it and simply link to that one instead:
click me
<!-- further down the page is the content -->
<div id="#element1">Here is what users will be reading!</div>
<div id="#element1-target"
style="visibility:hidden;{make this lower down below the actual text}"></div>
My only question though, is if your header bar is blocking your text that the page 'jumps' to, wouldn't you want the page to link to higher than the target?
Given your question is vague and I don't think your example shows what your problem is, this should do what (i think) you're trying to do.
:)