I was wondering what you do to make the nav bar freeze at the top of the page. What I mean is that if the nav bar starts about halfway down the page, when a user scrolls down and the nav bar reaches the top I want it to stop there and so that it is always visible. I have seen this on multiple sites, but I am not sure how it is done.
With CSS you can set it's position to fixed
#navBar{
position:fixed;
height:30px;
...
...
...
}
Related
I'm using v-expansion-panels from Vue, and I notice an odd behaviour: When expanding the panels the page scrolls randomly, sometimes it scrolls leaving the header on the top page, sometimes it scroll way down moving the desired panel out of sight so I have to scroll up.
Is this normal? Is there a way to control this random scrolling, so when expanding the panel the automatic scroll moves the page to the top of the window browser?
Thanks
Gerardo
I tried already all the v-expansion-panels attributes.
I have a bottomTabNavigator and a topTabNavigator, if I click on the first tab of my bottom nav it loads the first tab of my top nav. What I want is for the first tab of my bottom nav to have it's own page loaded when being clicked on and still have the top nav being there. But how do I make this possible?
I've tried several things that came to my mind.
Render the top nav like a component on the first tab page of the bottom nav. I get this to work not quite the way I want it, but it still loads the first tab of the top nav then. Which is what I don't want, I want the first tab of the bottom nav (Home) to have it's own page.
Load the bottom and top nav on the first tab of the bottom nav which redirects to the first tab of the top nav. But then have Home (which is the first tab of the bottom nav) go in the top nav and then just have this home tab not visible. Though I've seen some work arounds for this, I haven't gotten any of them to work with my code.
// This is my code, what I want is for Home in the bottom nav to go to the home page
// and on the home page still have the bottom nav and top nav visible.
// How does the menu structure need to look like to make this happen?
export const HomeTop = createMaterialTopTabNavigator({
Introductie:{
screen: Introduction
},
Blog:{
screen: () => <NoAuth/>
},
{...}
});
export const MiddleScreens = createBottomTabNavigator({
Home:{
screen: HomeTop
},
{...}
});
I haven't been able to make it happen what I want to achieve. Also since I'm quite clueless at the moment as to what else to try.
I'm using react navigation V3. Is there a simpler way to make it happen? Or are there any workarounds that work with this version?
In short: I want a top nav and bottom nav on first tab page of bottom nav which is a page on it's own.
I Guess Tabs wont work in the case of yours. Since Tabs will be defaulted to 1st Page of TabList.
One work around will be have two Buttons and a View on the 1st Page of your Top Nav.
Just Like This
Initially load home page on your view, Once user presses Button 1, load your 1st Tab details, if he presses Button 2 load second Tab details.
You can handle this with a flag in state.
Hope it helps. Feel free to clarify if you have any doubts.
When in mobile view using Owl Carousel (Version 2 ) some of my sliders take up near the whole screen.
The carousel uses touch to slide left and right fine however when doing so the user cannot scroll the page up and down which makes it difficult to navigate the to the rest of the page.
Is there a way so that while sliding the scrolling for the page is still active?
Seems i had the touch-action property set to none disabling scrolling and zooming etc when touching on the items within the slide. I had to remove the below although i don't think this is default and i added it in at some point for some reason that i can't remember.
.owl-item {
touch-action: none;
}
i want to know if it's possible with bootstrap, to create the header with the logo and others informations, and then the navigation bar.
But the logo won't be fixe, only the navagation bar will be when it will be at the top of the page.
Here an example of header i'm trying to do with bootstrap
This partly depends on what you mean by "Header".
Often the "jumbotron" class is used as a header like this:
<div class="jumbotron"><img src='logo.png'>My Cool Company</div>
And the navigation bar is an independent element, specifically a navbar. It can be fixed on the page (scrolls with content) or Static on the screen (stays at the top or bottom)
Nabber example (always at the top):
<nav class="navbar navbar-fixed-top navbar-light bg-faded">
<a class="navbar-brand" href="#">Fixed top</a>
Link 1
Link 2
</nav>
You can find the other details on the Bootstrap page for Navbar:
Bootstrap Components navbar Placement
And the placement in this example is "navbar-fixed-top" so that it stays at the top of the screen, even when scrolling.
You may also want the navigation under the header, and want both to scroll until the navbar hits the top of the screen where it would then be fixed at the the top. This is sometimes called a sticky navbar. It can be done with jQuery, but at this time, I don't know of a way in Bootstrap without adding custom javascript.
Sticky Menu in jQuery - answer
If you do want the second option, without jQuery, ask another question on how to use Javascript switch from Fixed to Static when scrolling past the top of the screen.
thank you for your answer, but i think it s not my question, and i think my solution is not related to jumbotron.
if you look at the link i have give below, you can see that the logo of the site (w3school.com) is on the top when we are on the top of the page.
when we scrool down, this logo will disapear and only the nav bar (home, html, css, ...) will stay at the top.
I have a relative div above a fixed one which acts like a navigation bar.
I want to be able to scroll past the relative div before the fixed div starts having to scroll here is my website.
as you can see from just scrolling on the site the sidebar doesn't work as intended.
Try using JavaScript to detect the scroll position of the window and then change the CSS to start scrolling like a fixed div.
Another tip, the the fixed div which contains your projects on the home page lays over your footer when you scroll to the bottom.
Use JavaScript to detect if the user is at the bottom of the page or not and then set the CSS of it to have a margin from the bottom of the page.
Hope I helped.