Content hide in Navigation Bar - One Page Website - javascript

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.

Related

Why when I open a submenu page scroll up?

I am creating a menu for the mobile, that when I click on an item in a submenu appears. The problem is that if I do this when the page is scrolled a bit, the page scrolls back up ... (whether open or close the submenu).
This obviously does not happen when the page is not scrolled
This is the code:
http://jsfiddle.net/qsq4y9d8/3/
this a css of submenu item
.lisottomenu {
letter-spacing: 0.02em;
display: block;
background: #E4BF85;
border-top: 1px solid #fff;
font-size: 14px;
list-style-type: none;
width:100%;
}
this css of item parent
ul li.leaf {
background: #646464 none repeat scroll 0 0;
border-top: 1px solid #a0a0a0;
display: block;
font-size: 15px;
letter-spacing: 0.02em;
list-style-type: none;
position: relative;
}
This is the problem:
(the problem is the auto-scroll)
I hope you can help me, even though the code is a bit long and I do not write well in English ...
Per my comment:
Any <a> with an href containing a "#" places a # in the URL which in turn looks for an empty anchor. Since one doesn't exist, it defaults to scrolling to the top.
Remove the "#" from your links and it won't scroll to the top anymore
Change
Link
to
Link
and it should stop scrolling to the top.
You have so many elements being created and removed and styles erased and added to the elements every time the menu is clicked, I think the browser just tries to refresh the layout or something.
Try adding and removing classes that show and hide your sub menus, and have your elements in your html from the start, instead of creating and destroying so much (unless they need to be dynamically generated from the server or something)
The problem is that the sub menu is making the entire window higher, so it has to make this scroll just when you are closing the sub-menu.
It is just how the browser reacts to this kind of height change.
One solution would to give the side menu defined max-height, and overflow-y:scroll.
#content, #sidebar-first {
display: inline;
float: left;
position: relative;
overflow-y: scroll;
max-height: 370px;
}
This way, when the the sidemenus are opening it wont affected the height of the document.
fiddle - http://jsfiddle.net/qsq4y9d8/9/

Fixed divs under the bootstrap fixed nav

I'd like to attach some fixed alerts underneath the navbar-fixed navigation bar in bootstrap. My best attempt to this point is to make a div positioned at 50px with position: fixed; and width: 100%, and to insert the alerts in this div. The problem is that this cuts off the top of my other content the same way that navbar-fixed cuts off content when one fails apply padding to the body element.
#Alerts
{
position: fixed;
width: 100%;
top: 50px;
}
.alert
{
top: 0px;
//position: fixed;
padding-left: 15px;
padding-right: 15px;
padding-top: 4px;
padding-bottom: 4px;
margin-bottom: 0px;
border-radius: 0px;
}
body {
padding-top: 50px; // to avoid 'underlapping' the navbar
}
Here's a link to a not-working example: http://www.bootply.com/pnEHtLhUBi
My best idea at the moment is to use JS to adjust the padding-top value on body as alerts are created/destroyed, but this is likely bad for maintenance/readability and I'd prefer to do something more declarative with css.
Any suggestions?
Looks like there won't be a way to do this without js.
Since if the alert is dynamic, meaning it only appears when its triggers via the alert method
$('#alert-danger').show('slow', function(){
$('body').addClass('moreMargin')
});
you can also remove the moreMargin class from the body when you hide the alert
What about putting it inside the same div as the nav. When they popup they will push down the other content?
Also, since these are alerts, won't the user already have seen the content that is being covered? If they want to see it again they can just close the alerts. Maybe I just misunderstood what you are going for?

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/

CSS - Auto-height div

I have some expanding content in my #main (or) #panel (got this from a template) div, but when you expand it, it pops to the unknown, under the page...
How could I make my main div expand with my content.
CSS
#main
{
position: relative;
overflow: hidden;
}
I also have some JS/Ajax scripts that expand the page to the right size when you switch page, could they affect...?
See live demo here! (The (i) button)
The divs expand when you click on them.
A few times it worked on another computer, but very randomly..
Tell me if you need the scripts or more code.
Basically, everything's wrapped in .main -> .panel
Simple: When the div is expanded, expand the main div's height to fit it.
.panel
{
position: relative;
display: table-cell;
width:100px;
vertical-align:middle;
}
The problem is not with the main div, but the class panel.
.panel {
padding: 3.5em 2.5em 3.5em 2.5em;
position: absolute; // I'm the problem
top: 0;
left: 0;
width: 45em;
}
This is also a problem.
#me .pic img {
position: relative; // I'm evil
display: block;
height: 100%;
}
My debugging may have been awry though, since it doesn't want to play nice and stick with what I want it to do sometimes.
Let me know if this helps in some way, and if you need help debugging anything from there.
EDIT
Your problem may just be a matter of recalling the Script that you use to re-size the main div when the script that displays the hidden divs content goes off. That should re-size the page to fit the new content.
I can't locate where this script goes off, so if you can provide it, I could figure it out.
If your question is actually "how do I make my main div's height change dependent on it's contents" then all you need to do is remove overflow: hidden; from the css class.

jQuery dropdown bootstrap not working with some case

I have a question about my jQuery Bootstrap Dropdown. I have a problem when I try open the dropdown menu and then try to right click menu, the dropdown will appear disappear. And when I try to scroll down, the dropdown not fit with the root menu.
What I want is :
Make keep dropdown show when I try to right click the menu.
Make dropdown fit (fixed) when I try to scroll bar, it will stay to fit.
CSS :
.dropdown
{
position: absolute;
z-index: 9999999;
display: none;
}
for more detail see my fiddle for demo here
Anyone please advice. Thanks
working jsFiddle
change like this.
.dropdown
{
position: fixed;
z-index: 9999999;
display: none;
top: 35px;
right: 6px;
}
and comment
position() in show method.
and comment
$(window).on('resize', position);

Categories