I want my fixed navbar that stays on the top of the page to display over everything as I scroll down through the page, but when I scroll down the Carousel ends up on top of the navbar.
I have tried to give a z-index: 0 with an !important tag to the carousel, and z-index: 1 to the nav bar but that didn't do the trick. There is a photo attached to show the problem I am talking about.
give the zindex of fixed navbar some higher value like
z-index: 1090
I wrap the Navbar in a sticky div:-
<div className="sticky-top" style={{ zIndex: 1090 }}>
<Navbar></Navbar>
</div>
BTW I use react-bootstrap.
I'm looking at my header CSS properties. My header has a z-index: 1. Fiasco.
Change it to 1090. It will help you.
Check all elements what was overflow by the gallery. Check them all!!! (z-indexes)!
Related
I am trying to bring quill editor's link tooltip on top of a div container that has overflow: scroll; property in reactjs. Please refer codesandbox
I expect the tooltip to appear on top of div container without cropping or without reducing the width of div/tooltip. Could someone please help me with this?
Let's say I have the code from here:
https://stackblitz.com/edit/react-nqkupy?file=demo.tsx
which is the code from the material ui docs, "Responsive drawer" section:
https://mui.com/material-ui/react-drawer/#responsive-drawer
but I added an image as a logo at the top of the menu.
How can I remove the space above the logo?
Thanks.
Just remove the <Toolbar /> if you don't use it. Or move the logo above <Toolbar />.
You can do the following :
img {
position: relative;
left: 3.5em;
bottom: 1em;
}
/** Also Use a Class Selector if you don't want to alter all <img> elements on page.**/
Add this to your CSS File. This should work although you might need to play around with some media queries in order to make it responsive.
It also centers the logo, looks better IMO.
I have a bunch of react-select components on the screen. They are all inside a div with a class called bookData. The css for bookData is:
.bookData{
font-size:13px;
column-count: 2;
column-gap: 20px;
padding: 10px;
}
If I select something with react-select, the selection does not show up. If I remove column-count, my code for react-select works find, it will select items and display. Is there css, I can add that will allow react-select to work with column-count?
This CodeSandbox could help you: https://codesandbox.io/s/4jr596lr09
All you need to do is to wrap the two column content in a div displayed by flex.
Wrap the two elements in a div and set the flex value to 1 (Ref: What does flex: 1 mean?)
Can I have a multi line toolbar?
I need a fixed header for all my pages, but the ons-toolbar have only one line. I need two of it in my header.
It is possible to do that?
Thank you!
You can put an extra <div> with the appearance of a toolbar with class="navigation-bar": http://onsen.io/reference/css.html#toolbar
It is also possible to change the CSS of your current toolbar to make it bigger, if you want. The anwer of this question may be helpful: Doesn't show div in onsen ui and angularjs
Hope it helps!
Edit: some CSS to do this...
Fix the position to the top under a main toolbar: position: fixed; top: 44px;
Change the page content so the new toolbar does not overlap with it:
ons-toolbar ~ .page__content {
top: 88px;
}
Working here: http://codepen.io/frankdiox/pen/YXKyjX
I am using Bootstrap 3 with the following sticky footer from http://getbootstrap.com/examples/sticky-footer/
I set the #footer to min-height: 420px; so it will work responsively and adapt to narrow width and expand in height and stack the column boxes. This works just fine.
But when setting a min-height the footer will cover the content in top of it.
Is there a solution to this so the footer will be "pressed" down?
This feature works by also setting a bottom margin on the body to offset the size of the footer.
For instance, sticky-footer.css contains:
body {
margin-bottom: 60px;
}
You'll need to adjust it to the height of your #footer.