How do i get a fixed navigation for my website? i want the menu on my site to remain stick to the page as the user scroll downs to see the content.
The navigation disappears as the user scroll down at the very bottom of the page. How do i make it stay? I tried using this but it doesn't work.
/* The sticky class is added to the navbar */
.sticky {
position: fixed;
top: 0;
width: 100%;
}
Here's the link of my site.
https://kickthebuddyapk.com/
Thank you!
Try to remove
.nav-secondary {
margin-top: -100px;
padding-top: 100px;
}
and replace with
.nav-secondary {
position: sticky;
top: 0;
background: white;
}
Try to add:
#genesis-mobile-nav-secondary{top:0; position:sticky;}
Related
I've tried reordering the menu with css "order: 1;" etc, but I cannot moove the hamburger button on the right.
In wordpress there is no way the edit the menu (I can just edit the link and logo image), and I guess I need to do it by code.
The website is: https://materassibifulco.it (look at the mobile version)
I need to make the cart icon the last one, and the hamburger menu the first.
Thank you very much! If you need more information just ask me
I have checked the menu is placed with position: absolute; and it harder to align with simple order:1;
try this code it helps you
#media (max-width:767px){
.header_mobile .octf-btn-cta {
padding-right: 0;
position: absolute;
right: 0;
}
.mobile_logo {
display: inline-flex;
justify-content: center;
width: 100%;
}
.mobile_logo a img {
left: 0 !important;
}
.octf-header-module:nth-child(2) {
display: none;
}
#mmenu_toggle {
left: 0px;
}
}
In inspector after this style it looks like
I want to add to my site based on Bootstrap 3 Affix feature for bottom navigation links. These links fixed on the bottom and added offset for the footer.
But when I scroll to the footer I see the navigation do some small "jump".
All work as need, even if I toggle to a mobile panel in Google Chrome. But excluding real mobile devices. In any case, I tried on three Android devices.
I added a link to a short video from the phone screen for clarifying: https://imgur.com/a/lcBASRD.
Please see to the bottom of the screen.
CSS:
#nav_affix {
left: 50%;
margin-left: -70px;
width: 140px;
z-index: 99999;
}
.affix {
position: fixed;
bottom: 0;
}
#nav_affix.affix-bottom {
position: absolute;
}
#nav_affix div.next {
float: right;
}
#nav_affix div.prev {
float: left;
}
#nav_affix div.next,
#nav_affix div.prev {
width: 60px;
height: 60px;
border-radius: 10px;
}
JS:
$('#nav_affix').affix({
offset: {
bottom: $('.footer_wrap').outerHeight(true)
}
});
Any ideas?
Thx for any answer.
Best.
You should place footer in a wrapper with same height as footer. Thus, when footer placing its original position, it will not make a jump.
I have done this with dynamically but also static height will solve the problem.
$('#nav_affix').on('affix.bs.affix', function () {
$('#footer-wrapper').height($('#nav_affix').outerHeight(true))
});
Hey Stackoverflow Community,
I have a simple lightbox script with a few images on the page, but it somehow doesn't work as it should. When I use position:fixed on then the overlay, then it is full and the image sticks to the top, but when I use position:absolute, then it is cut half way through page and the image is gone to the top.
There must be something really easy I am missing, right? Maybe my HTML structure is wrong?
The error can be found here live - http://kriskorn.eu/lightbox-error/
Thank you for all the help!
Kris
here are two issues
1) you are using padding-top: 700px; in .main p which force the images to go down the page . and with position absolute the images can never display with overlay. the overlay div will go up with scroll .here position:fixed can work .Reason is with position fixed the content will move upside and the overlay will stay on fixed position.
2) you should use opacity:0.* or any light color .you are using 0.95 which will not display the content below the div.
this should work please check
#overlay {
background-color: rgba(255,255,255,0.3);
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-align: center;
/* display: none; */
}
with position absolute it will not cover all the page.
this is surprising. Why you are using this ??
.main p {
padding-top: 700px;
}
this can also be an option.
.main p {
padding-top: 10px;
}
#overlay {
background-color: rgba(255,255,255,0.3);
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
/* display: none; */
text-align: center;
}
It seems that the answer I was looking for is, that you can't have position:absolute without some kind of JavaScript code. I used position:fixed after all, because that was already working for me.
I am using Wordpress default theme Twenty Twelve, my website is: http://ninarakovec.com.
I would like to make my existing navigation menu stick to the top all the time whilst scrolling, for example like website called wpsites (can't post the link because of stackoverflow's link limit).
You can view the theme's CSS here: http://pastebin.com/muXyT6AY
How would I go on about doing this, I have no idea what to do, I currently have made it so you can click on the navigation bar and it takes you to that respective section on the page, but the menu doesn't stick to the top so it isn't what I wanted. Please help!
This should work:
.site-header {
position: fixed;
top: 0;
width: 100%;
left: 0;
background-color: lightblue;
z-index: 1000;
}
.main-navigation ul.nav-menu {
border: 0;
}
I think you have to change the .site-header class into this:
.site-header {
padding: 24px 0;
padding: 1.714285714rem 0;
position:fixed;
top:0;
margin:0 auto;
}
I have a banner with some Social media icons on the left:
.social_share-wrapper {
margin-top: 200px;
margin-left: 1px;
position: fixed;
width: 30px;
z-index: 99;
}
But when I click on an anchor in the page, like:
<img src="path/to/image/image.png" /><h3>Click</h3>
And scroll back to the top of my page, I get this:
Does it make any sense? Or did someone already had this before?