I am currently trying to fix an issue where when I make any divs under my nav it goes to the top left of the page. If I put a padding-bottom on the nav it fixes the issue, but I'm trying to make the page responsive and not have to play around with padding numbers.
https://codepen.io/gmorabito/pen/JjMMdOj
nav{
position: fixed;
top: 40px;
width: 95%;
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
z-index: 9999;
border: 1px solid black;
border-radius: 10px;
margin-left:2.5%;
z-index: 1;
}
make the nav position:static and add 25px to margin-top. Absolute positioning should be avoided as much as possible. It takes the element out of the flow of the dom and makes responsive websites much more difficult
Related
So, for some reason, a secondary navbar that I created moves on Scroll, even though the position is fixed. That only happens on mobile only and only in the production version. It is not a problem on development. (Same goes for some other fixed elements such as an intercom chat).
This is the CSS:
.BuyNavbarOnScroll {
background-color: #0a4525;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 5px;
position: fixed !important;
top: 50px;
width: 100%;
z-index: 5;
height: 3em;
display: flex;
align-items: center;
justify-content: center;
}
Any Idea why it's happening?
Problem Depiction
i'm working on FCC Technical Documentation Page and i'm having an issue, i'm trying to make this project mobile responsive, but i'm running into an issue where I can't seem to figure out how to move my left fixed nav bar and transition it to a top nav bar that is center aligned at anything below 920px, if you can be of any help I would appreciate it. I will link the project below so anyone can look at the code.
EDIT Finished making the project mobile responsive, might not be the most efficient method but it worked as i'm learning, click the link to view the code to see what I did that worked.
https://codepen.io/ochovj/pen/eYvwmYr
#media screen and (max-width: 920px) {
.nav-ul {
position: relative;
top: 0;
margin: 0;
padding: 0;
text-align: center;
float: none;
}
}
/* End of Responsiveness */
/* Nav Bar Container */
#navbar {
position: fixed;
width: 290px;
height: 100%;
top: 0px;
left: 0px;
border: 2px solid black;
background-color: white;
padding: 50px 0;
}
The easiest way would be to make your navbar list display: flex at the desired breakpoint:
#media screen and (max-width: 920px) {
.nav-ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
}
display: flex alone should do roughly what you want, but flex-wrap: wrap allows multiple rows if your elements don't all fit on a single line and justify-content: center will center the <li> elements inside the <ul> parent.
The list elements will need more styling, like padding, as they'll just be squished in a row together -- but this will quickly fix your position issue.
I am pretty new to HTML/CSS and have begun trying to learn CSS flexbox layout. Just working on a simple site recreation from scratch using flexbox.
In full screen, the image positioning on the logo looks good. However, when shifting around the screen size, my nav bar on the right side responds but the logo image on the left does not. I believe I have set it up correctly though.
.header-container {
display: flex;
width: 100%;
height: 150px;
align-items: center;
justify-content: space-between;
}
.header-container .logo .sb{
display: flex;
justify-content: flex-start;
width: 60%;
position: relative;
left: 50px;
padding: 20px;
}
Here's a link to my work as well: https://codepen.io/gkunthara/pen/VWdrYj
What exactly am I doing wrong? Any tips on the type of positioning I'm doing with flexbox or with flexbox, in general, are appreciated!
Remove Position
.header-container .nav-bar-container {
display: flex;
/*position: absolute;*/
/*right: 100px;*/
}
Remove position on nav & set max-width: 100% on logo image.
https://codepen.io/thesumit67/pen/bRKYLx?editors=1100
My footer is having some odd issues when the screen resolution gets to a certain point - it responds and works with the screen size, but only the upper half of the footer has a background. I have bottom set to 0; and position set to absolute but it just isn't looking good. Any help would be appreciated.
Link to webpage (be sure to play with the responsiveness to see what I'm talking about): http://cardspoiler.com/Cardspoiler/MSoG/Navbar/Mage.html
HTML: https://github.com/Bonteqq/Cardspoiler/blob/gh-pages/Cardspoiler/MSoG/Navbar/Mage.html
CSS: https://github.com/Bonteqq/Cardspoiler/blob/gh-pages/Cardspoiler/Cardspoiler.css
The issue I am seeing is in the .left and .right classes. You have a transform: translateY(25%); attribute on them which is pushing them down past their natural positions. If you want your footer to sit at the bottom of the page and have the same look they do now change your CSS like so:
footer {
position: absolute;
bottom: 0;
width: 100%;
background-color: rgba(128,128,128,.3);
text-align: center;
border-top: 1px solid #232526;
}
.left, .right {
display: inline-block;
list-style-type: none;
width: auto;
font-size: 100%;
vertical-align: top;
bottom: 0;
margin-bottom: 0;
padding-bottom: 10px;
}
.right li {
text-align: left;
}
Basically I just removed all of the translate properties from those divs removed the margin-bottom from the uls and adding some padding-bottom to them. With the max-height removed from the footer tag the padding gives some space from the bottom of the page and expands the footer background so it doesn't leave a gap at the bottom.
My CSS positioning skills have always been truly terrible. I'm looking to place my nav bar next to my logo, as well as making it move with the page and not get all screwy on anything smaller than a maximized window on a 1080p screen.
What it currently looks like: http://5.9.78.201/abellant/
It will likely look odd if you're on a different screen size.
I've (so far) used methods found on here, to no avail, using relative, absolute, and even clearing before giving up on it.
Can anyone show me where I'm screwing this up? I'm quite embarrassed by the fact that of all things, my positioning is just so bad.
Thank you.
If you want to position your logo and navbar at the center of the page::
Set #header "display:inline-block", "height:auto" and "text-align: center;" and remove all the css you have added to #logo and #navigation
#header {
width: 100%;
height: auto;
background: #f2f2f2;
margin: 0;
padding: 0;
box-shadow: 0 1.5px 1px #777;
display: inline-block;
text-align: center;
}
And if you want to set your logo and navigation side by side::
#header {
width: 100%;
height: auto;
background: #f2f2f2;
margin: 0;
padding: 0;
box-shadow: 0 1.5px 1px #777;
display: inline-block;
}
#logo {
float: left;
width: 50%;
}
#navigation {
float: right;
margin: 40px;
}
If you want to move your header section with page scroll. Set #header to "position:fixed".
So part of the problem is that you have a fixed left and right margin. Remove the fixed left and right margin for #logo and #navigation and do something like the following in your CSS:
#header {
margin: 0 auto; /* 0 px on top and bottom, auto on left and right => centered for a block element */
width: 960px; /* You need a width that will accomodate the logo and nav */
}
To make this work at other sizes, you'll need to look into CSS3 breakpoints. Here is a tutorial:
https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/?hl=en
I solve your problem.
.container {
min-width: 500px;
position: relative;
text-align: center;
}
#logo {
display: inline-block;
vertical-align: middle;
}
#navigation {
display: inline-block;
}
If you noticed that the logo and the menu are NOT perfectly center it's because your image has a small white space, if you could delete that space and replace the new image it will be PERFECTLY center :)