I have a main navbar with a scroll animation on my website. I wanted to created a fixed, little (and nontransparent) utility bar that would always stay on the top of my site.
This is what I have now:
https://imgur.com/a/A1s5B1I
And this is what happens when I add the utility bar to it:
I've tried multiple stuff and I have no idea how to fix this.
This is my utility navbar code:
export const UtilityNav = styled.nav`
background: yellow;
position: sticky;
min-height: 40px;
/* padding-bottom: 20px; */
/* margin-top: 20px; */
/* margin-top: -10px; */
display: flex;
justify-content: center;
align-items: center;
font-size: 1rem;
top: 0;
z-index: 10;
`;
And this is my main Navbar code:
export const Nav = styled.nav`
background: ${({ scrollNav }) => (scrollNav ? '#81A687' : 'transparent')};
min-height: 80px;
margin-top: -80px;
display: flex;
justify-content: center;
align-items: center;
font-size: 1rem;
position: sticky;
top: 0;
z-index: 8;
transition: 0.8s all ease;
#media screen and (max-width: 960px) {
transition: 0.8s all ease;
}
`;
The negative margin-top: -80px makes the navbar transparent before scrolling down. I think this is something I need to work on, but the most logical (at least for me) change to margin-top: -110px; (NavBar height + UtilityBar height) didn't work... :-(
I have no other ideas. I'm looking for the easiest way, I'm completely new to this.
Thanks in advance!
I've fixed this adding UtilityBar to my main Navbar and displayed them in the same flex container with height of 110px.
<Nav scrollNav={scrollNav}><UtilityNav>[...]</UtilityNav></Nav>
This way the whole bar sticks to the top. I still have no idea why they didn't stick to each other as seperate components, but this workaround works great for now.
I've also tried creating a parent container to both of them, so the sticky position would work, but everything well apart when I did.
Judging by this statement, these navs in different parents, I've made a simple demo, basically, if you can't have a single parent for these navs, you must at least have them inside relative containers, this way they will not overlap.
If you change .container style to fixed or absolute positioning in the demo, you will have the same bug as you have
https://jsfiddle.net/DraGonM/yjqtms05/20/
Related
Having a little trouble removing a very thin border that is appearing around our :before and :after elements. This only seems to appear on a mobile device - doesn't even pop up in Chrome's device tools.
Problem:
Here's how the HTML/CSS looks.
.container {
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: center;
list-style: none;
padding: 100px 0px;
margin-bottom: 56px;
width: 100%;
}
container:after {
content: "";
background-image: url("$asset");
background-size: cover;
background-position: bottom;
position: absolute;
left: 0;
top: -15px;
width: 100%;
height: 16px;
border: 0;
outline: 0;
}
<div class="container">
<div class="bg"></div>
<section>
//Headings and Links here
</section>
</div>
I've tried making absolutely sure borders and outlines are set to none - and also adding and taking away a pixel or two from the top and bottom margins, but nothing really seems to work. It's also a bit inconsistent, the lines don't necessarily show on every page that the component is on.
Replace border: 0; with: border: none; very simple CSS Code. Also, the outline code is just for things like text, this has nothing to do with the border.
It's a chrome bug lads. Second answer here nailed it.
The solutions is reducing the height/width to 0 and putting padding in to account for the space instead. Seems to have worked in my case.
I created a Sandbox for this.
The problem is that I want to have the text under the images to be in a single line and I have tried to change this:
.timeline-carousel__item-inner {
position: relative;
padding-top: 45px;
}
to this:
.timeline-carousel__item-inner {
position: fixed;
bottom: 0;
}
And its works making all text same position but then the Images and everything get pushed up.
Please advice?
I would suggest then that you have for example the class
.timeline-carousel__image {
padding-right: 30px;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 164px;
}
This way you are having a flex, that pushes the text away from the image, and the min-height makes sure all the containers are at least of that size, but then if you have long images, you might have a problem, its better to at least have a max height for the images or a max height to width ratio , change the min-height, to fit your need, hope this solves your issue.
Good luck
This is yet another question about centering vertically in a div, but I've tried lots of the solutions discussed in other answers to no avail.
Here's an example of the code to play with: https://codesandbox.io/s/z2qzxwk99x
The arrow-icon is centering vertically in the viewport, instead of the viewer-wrapper div. As such, it drops off of the image completely, instead of staying centered vertically, if you make the page very narrow.
.viewer-wrapper {
background-color: #1b8dbb;
position: relative;
}
.arrow-wrap {
position: absolute;
max-height: 100%;
line-height: 95vh;
background-color: #4cae4c;
margin: auto;
opacity: .9;
left: 0px
}
.arrow-icon {
background-color: orangered;
}
.comic-page {
object-fit: contain;
max-height: 95vh;
width: 100%;
}
<div className="viewer-wrapper">
<div className="arrow-wrap">
<LeftArrow className="arrow-icon" size={75} />
</div>
<img className="comic-page"
src="http://assets-production.rovio.com/s3fs-public/hatchlings_0.jpg"
about="This is an image"
/>
</div>
The magic here is Flexbox (and Grids, but Flexbox has way better browser support). Keeping the same HTML layout, you could use somerthig like:
.viewer-wrapper {
background-color: #1b8dbb;
display: flex;
align-items: flex-start;
}
.arrow-wrap {
background-color: #4cae4c;
margin: auto;
opacity: .9;
}
.arrow-icon {
background-color: orangered;
}
.comic-page {
object-fit:contain;
min-height: 100%;
max-width: 100%;
}
Depending on how much support you need of IE, there are different ways to accomplish vertical alignment.
If you don't have any need to support IE, you could use the flex display property:
.viewer-wrapper{
display: flex;
align-items: center;
}
or, continue with what it looks like you're trying to do. What your missing to do so is the top: property. Since you've already correctly made the parent element position: relative, setting top: 50% will set your arrow to begin halfway down the viewer-wrapper element. From here you need to set a negative margin to correct for the arrow's height. Since it looks like you specify a size of 75(px?), you can achieve this like:
.arrow-wrap {
position: absolute;
background-color: #4cae4c;
margin-top: -37.5px;
left: 0px;
}
You shouldn't have to set any other margins.
A great resource for this, and what I used to help answer you, is howtocenterincss.com.
I am creating a website with Wordpress for my mother-in-law (that's for the girly design). Basically I am near completion, but I am way over my head with two issues in the CSS. These seem very basic issues even from my standpoint of view, but with hours and hours of tinkering I am fresh out of ideas and Google didn't help me this time. It's been a while since I have had to create or modify any CSS.
First problem:
I cannot get the horizontal menu to center. I have tried to remove the float:left, I have tried to replace it with float:none and I have changed the display: block and display:inline lines to inline-blocks but the menu stays in its position. Only difference I have managed to make is to move the whole menu to the top of the page and that's not desired. What could be the issue in this?
Second problem:
There seems to be padding (the white lines) at the top of the menu and at the bottom and top of the small menu (mobile). I have tracked down all the padding-lines in the CSS but none of them really make a difference, only one which removed the horizontal paddings and that's not desired.
I would be really glad if somebody spots where I have gone wrong!
The website is at http://janenlahwr.cluster020.hosting.ovh.net/
Thanks in advance!
Best regards,
Tero Korhonen
Lappeenranta, Finland
Hi Tero,
the first problem has really quick solution - CSS3 Flexbox. You can read about it on this w3schools site.
Remove unnecessary float: left and add display: flex and justify-content: center to .main-navigation ul. So it should looks like this:
.main-navigation ul {
margin: 0px 0 0 0;
padding: 0px 0;
padding-left: 0px;
list-style-type: none;
display: flex;
justify-content: center;
}
Second problem you can fix with setting div.site-logo max-height = height your logo (I see that is 200px). So in this case should looks like this:
.site-logo {
min-height: 70px;
padding: 0px;
float: left;
line-height: normal;
max-height: 200px;
}
Edit:
Sorry, I forgott check for lower resolutions. There is problem with overflow. You set in style.css:640 overflow: hidden and it works correctly since resolution is above 800px. If not then activates this rule:
#media only screen and (max-width: 800px) {
#main {
overflow: visible;
}
}
that overwrites previous correct rule for #main overflow: hidden. So you have two options: delete this rule for screens over 800px or change this property from visible to hidden.
I hope I helped you with your problems :) Good luck!
For the menu problem, change your CSS rules like this:
.main-navigation ul {
margin: 0px 0 0 0;
padding: 0px 0;
padding-left: 0px;
list-style-type: none;
/* remove float: left; */
text-align: center; /* added */
width: 100%; /* added */
}
.main-navigation ul li {
position: relative;
display: inline-block;
/* remove float: left; */
text-align: center; /* not necessary */
}
I think I am missing something but I can't find a solution to the following problem.
I am using custom checkboxes on a list of sentences. At first it looks good but once you check the first checkbox, it moves.
I can't find out why the checkboxes move once you check them?
Here is a fiddle: https://jsfiddle.net/Hodor_/vhhj7huv/
I have noticed that by changing content: "/2714"; to content: "";
the checkbox doesn't move on click.
Can't understand how the content affects the position of the checkbox.
In other questions I saw recommendations to use vertical-align:middle, it doesn't work for me.
Any ideas?
The issue is with your usage of display: flex in conjuncture with position: absolute. It doesn't always work well.
To fix this you need to make 3 simple changes:
1) Remove position: absolute from your label:before
2) Remove padding: 0 0 0 50px; from your label
3) Add a margin-right: 20px(or any you want) to the label:before.
Simple.. So your final code looks like - Fiddle here
label{
display: flex;
align-items: center;
font-size: 14px;
font-weight: 400;
line-height: 30px;
cursor:pointer;
color black;
}
label:before{
/* position:absolute; */
content:"";
display:flex;
justify-content: center;
align-items: center;
height: 30px;
width: 30px;
left: 25px;
text-align:center;
font-size: 20px;
color: white;
border: 1px solid #9b9b9b;
border-radius: 4px;
transition: all 0.5s ease;
margin-right: 20px;
}
Remember: flexbox allows you to have a "flexible" or flow like control over your elements, it gives a more flexible nature to your elements positioning elements on its own based on your requirements.
position: absolute on the other hand does the exact opposite. It takes the element out of the document and lets you place it where you want via directions(left, right, top, bottom), its more like a "rigid" or stubborn way of controlling your elements.
I used text-indent to hide the content, so basically the content is always there and the checkbox now is not moving.
Here the working fiddle.