This is the first time I'm getting this type of problem. I'm trying to make responsive navigation bar. At a certain width, I want my nav links div to go to right side bar. But the nav links div is not taking full viewport height even after giving 100vh. Here is the code -
HTML
<header>
<nav>
<div class="logo">Logo</div>
<div class="nav-items">
<li><a href = '#'>Link-1</a></li>
<li><a href = '#'>Link-2</a></li>
<li><a href = '#'>Link-3</a></li>
</div>
</nav>
</header>
SCSS
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
header {
background: blue;
nav {
height: 65px;
max-width: 1340px;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
margin: auto;
padding: 1rem;
.logo {
font-size: 2rem;
color: black;
}
.nav-items {
li {
display: inline;
a {
color: black;
text-decoration: none;
margin-left: 2rem;
}
}
}
}
}
#media screen and (max-width: 768px) {
header nav .nav-items {
position: absolute;
right: 0;
height: 100vh;
width: 50%;
border: 1px solid black;
}
}
Link to codepen -
https://codepen.io/yell0wflash/pen/JjWGwJa
Set position to fixed, add top:0; also height:100vh and left or right to 0 in the media query
This is because your has align-items:center; change this based on media query.
#media screen and (max-width: 768px) {
header nav {
align-items:unset;
}
}
The height is 100vh, but you have set align-items:center, so the element is offset to align with the other flex element.
Add
header nav {
align-items: flex-start;
}
To your media query
Now as your nav element has padding you need to accommodate that with
height: calc(100vh - 16px);
Related
I'm trying to create a banner that has two buttons on it:
.banner {
width: 100%;
display: flex;
flex-direction: column;
margin-top: -4%;
}
.banner img {
width: 100%;
/*image is 1232x317 by default and defines the size of the banner*/
}
.banner-buttons {
display: flex;
flex-direction: row;
margin-left: 6.2%;
position: absolute;
top: 10%;
}
.banner button {
display: flex;
font-size: 200%;
border: none;
border-radius: 5px;
font-weight: bold;
align-items: center;
padding: 5px 15px;
}
<div class="banner">
<img src="https://picsum.photos/1200/300">
<div class="banner-buttons">
<button>Assistir</button>
<button>Mais Informações</button>
</div>
</div>
but the problem is, the height of the buttons change based on the viewport, destroying the banner, how can I position it without ruining it?
I would personally avoid absolute positioning and use background image to create the layers.
You can set a min height on your banner if you desire.
I would also use em and media queries to reduce the font size when the screen resolution is smaller.
.banner {
background:url(https://picsum.photos/1200/300);
padding:10px;
}
.banner-buttons {
display: flex;
justify-content:center;
align-items: center;
}
.banner button {
font-size: 2em;
border: none;
border-radius: 5px;
font-weight: bold;
padding: 5px 15px;
margin:5px;
}
<div class="banner">
<div class="banner-buttons">
<button>Assistir</button>
<button>Mais Informações</button>
</div>
</div>
Actually what solved for me was adding position: relative to .banner, now the buttons are displayed at the exact same position at every screen size.
I'm writing an app that replicates the look/feel of a desktop OS, and my navbar in the bottom of the page shrinks in height when the page is resized in height. It shrinks in such a way that it becomes unusable at a point.
I've already tried some CSS properties such as using: position: fixed, position: relative, and position: absolute. position: absolute is the one that has been the best try out of all of them. If I use any others, the navbar would stick at the top no matter what you change in the style.
body {
/* these are for the navbar */
top: 100%;
margin: 0px;
padding: 0px;
/* normal styles */
font-family: "MS Sans Serif";
color: white;
background-color: #008080;
font-size: 12px;
/* without this, the page would go blank
overflow: hidden;
}
ul {
/* this is what works best */
position: absolute;
width: 100%;
top: 96.17%;
/* normal navbar styling.. */
list-style-type: none;
margin: 0px;
padding: 0px;
overflow: hidden;
background-color: #ffffff;
}
I expected the navbar to move up normally as needed, keeping its properties. Instead, the navbar moves up while the page is resized, but it becomes thinner and thinner until it is unusable.
Here is a sample gif: enter image description here
ul {
display: flex;
list-style: none;
align-items: center;
flex-flow: row;
background: red;
position: sticky;
max-width: 100vw;
width: 100%;
color: wheat;
height: 50px;
justify-content: space-around;
}
#media screen and (max-width: 768px) {
ul {
transition: .2s all linear;
height: 45px;
max-width: -webkit-fill-available;
width: 100%;
}
}
<ul>
<li>Home</li>
<li>About</li>
<li>Help</li>
<li>Contact</li>
</ul>
Okay, I found a solution: with #media I'm accessing the image's width and the bar separately and it's working but is there any shorter way codewise?
I searched the internet for a solution but none of what I found helped me so far.
I'm trying to make my header to be responsive to the browser's width but it isn't working.
I tried to make just the image responsive or just the top bar but nothing works...
Any ideas?
<header class="header">
<div class="top-bar">
<div class="nav-container">
<ul class="navbar">
<li>החשבון שלי</li>
<li>המתכונים שלי</li>
<li>אודות</li>
<li class="last-btn">צרו קשר</li>
</ul>
</div>
</div>
<div class="banner">
<img src="Images\maadanot_winter_banners.jpg" alt="אפייה חורפית"/>
</div>
</header>
and this is the css:
body {
margin: 0;
}
.top-bar {
width: 100%;
background-color: #404040;
padding: 12px;
}
.nav-container {
width: 68%;
margin: auto;
}
.navbar {
margin: 0;
list-style-type: none;
background-color: #404040;
display: table;
font-family: Helvetica;
font-size: 14px;
}
.navbar li {
display: table-cell;
border-left: 1px solid white;
padding: 0px 10px;
overflow: hidden;
width: 85px;
text-align: center;
}
.navbar a {
color: white;
text-decoration: none;
}
.navbar a:hover {
font-weight: bold;
}
#media screen and (max-width:900px) {
.header {
width: 100%;
}
}
.banner {
margin-top: 33px;
width: 100%;
text-align: center;
}
Try to change it into:
#media screen and (max-width:900px) {
.header {
width: 100vw; /* viewport width */
}
}
device-width is not correct value for width.
Use : <
meta name="viewport" content="width=device-width, initial-scale=1">
The width property controls the size of the viewport. It can be set to a specific number of pixels like width=600 or to the special value device-width, which is the width of the screen in CSS pixels at a scale of 100%.
The initial-scale property controls the zoom level when the page is first loaded. The maximum-scale, minimum-scale, and user-scalable properties control how users are allowed to zoom the page in or out.
When you are working om Media Queries, You have to need change inherit property if you declare cascaded down.If you have set Backgruond images on the body, there is need a queries to cancel background images.
The keyword ‘only’ can also be used to hide style sheets from older user agents. User agents must process media queries starting with ‘only’ as if the ‘only’ keyword was not present.
It's not really clear what you want, but to get your image span the whole width in all sizes, you can add this rule:
.banner img {
width: 100%;
}
This will size the image within its container (which has 100% width, so eventually the image will span the width).
BTW: .banner is a DIV that will be 100% wide anyway, so you actually can erase the 100% width for .banner
body {
margin: 0;
}
.top-bar {
width: 100%;
background-color: #404040;
padding: 12px;
}
.nav-container {
width: 68%;
margin: auto;
}
.navbar {
margin: 0;
list-style-type: none;
background-color: #404040;
display: table;
font-family: Helvetica;
font-size: 14px;
}
.navbar li {
display: table-cell;
border-left: 1px solid white;
padding: 0px 10px;
overflow: hidden;
width: 85px;
text-align: center;
}
.navbar a {
color: white;
text-decoration: none;
}
.navbar a:hover {
font-weight: bold;
}
#media screen and (max-width:900px) {
.header {
width: 100%;
}
}
.banner {
margin-top: 33px;
}
.banner img {
width: 100%;
}
<header class="header">
<div class="top-bar">
<div class="nav-container">
<ul class="navbar">
<li>החשבון שלי</li>
<li>המתכונים שלי</li>
<li>אודות</li>
<li class="last-btn">צרו קשר</li>
</ul>
</div>
</div>
<div class="banner">
<img src="http://placehold.it/1200x90/fa0" alt="אפייה חורפית" />
</div>
</header>
So I'm trying to recreate the following layout for a lab: http://i.imgur.com/T24vvGu.jpg
I've started by tackling the navigation bar. I set the position to absolute so I can give it a top: 50px; property to move it down 50px from the top.
I tried to then set the logo's position to relative, so that relative to the navigation bar, I can move it 20px from the left or so. But when I use relative positioning, the logo sits inside of the navigation bar and makes the navigation bar's height bigger.
I thought that by setting the logo's position to relative, it would treat the logo as if it's not a part of the navigation bar. However, that's not the case. So what I did was I also set the logo's position to absolute. This entire thing is just killing my soul. For some reason I can't wrap my head around how to do this.
I went to web archive, and looked up spigot design's website. What they did, was they set the navigation bar's position to fixed, and the logo to relative. I tried doing this as well but the logo would still sit inside the navigation bar and extend it's height.
Furthermore, I have to set the logo to sit in the middle of the navigation bar when the browser is 768px and below. And then, two menu links sit to the left of the logo, and the other two menu links sit to the right of the logo. I'm completely lost at how to do this. I don't think I'd have a problem with the rest of the layout. It's just this navigation bar and logo positioning that's driving me insane.
Here is my code: http://cryptb.in/v48Y#cf572c29a798b3c6593631d831c8a323
Should I upload my code with the logo images as well? That may make it easier to follow. I'm not sure what the best practice is as I'm new to stack overflow.
HTML:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Lab Eight</title>
<link href="css/styles.css" rel="stylesheet">
</head>
<body>
<!-- navigation bar left -->
<div class="navbar">
<div id="logo"></div>
<div class="container">
<ul class="float-right">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Media</li>
</ul>
</div>
</div>
<div class="container">
<div class="row">
<div class="column-twelve">
</div>
<div class="column-twelve">
</div>
</div>
</div>
</body>
</html>
CSS:
#import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);
body {
background: #f3f3f3;
font-family: 'Open Sans', sans-serif;
margin: 0 auto;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 500;
line-height: 1.1;
}
/* Horizontal line to divide content */
hr {
margin-top: 10px;
margin-bottom: 10px;
border: 0;
border-top: 1px solid #332929;
}
#logo {
background: url('images/logo-left.png');
display: block;
width: 250px;
height: 100px;
position: absolute;
left: 15px;
top: -20px;
}
.column-twelve h1, h2, h3, h4, h5, h6 {
color: #f2f2f2;
}
.column-twelve h2 {
font-size: 1.875em;
}
.row .column-twelve p {
color: #f2f2f2;
font-weight: 400;
font-size: 0.875em;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
/* Acts as a container to wrap all the content so it doesn't take up 100% of the page. */
.container {
width: 90%;
padding-right: 10px;
padding-left: 10px;
margin-right: auto;
margin-left: auto;
}
.navbar {
position: absolute;
width: 100%;
min-height: 58px;
top: 50px;
background: #fefefe;
}
.navbar li {
position: relative;
display: inline;
list-style: none;
}
.navbar li a {
color: #333333;
text-decoration: none;
font-size: 0.75em;
font-weight: bold;
padding: 10px 10px;
text-transform: uppercase;
}
/* The row for the columns. */
.row {
margin-right: -15px;
margin-left: -15px;
}
.column-twelve {
width: 100%;
}
.column-eleven {
width: 91.66666667%;
}
.column-ten {
width: 83.33333333%;
}
.column-nine {
width: 75%;
}
.column-eight {
width: 66.66666667%;
}
.column-seven {
width: 58.33333333%;
}
.column-six {
width: 50%;
}
.column-five {
width: 41.66666667%;
}
.column-four {
width: 33.33333333%;
}
.column-three {
width: 25%;
}
.column-two {
width: 16.66666667%;
}
.column-one {
width: 8.33333333%;
}
#media screen and (max-width: 768px) {
#logo {
position: absolute;
margin: 0 auto;
background: url('images/logo-center.png');
height: 146px;
width: 250px;
}
}
Here you go: http://codepen.io/n3ptun3/pen/avrXaE?editors=110
To complete this, I positioned the #navbar relative to its normal position. Then I absolutely positioned the #logo and #container (from their first positioned ancestor element, i.e. #navbar.)
The height issue comes from setting min-height: 58px; on .navbar. Instead, you want to use height: 58px;.
FYI--when using media queries, it is best practice to write your code mobile first. This means writing your code for the smallest screen first. In order to do this, you must use min-width instead of max-width. Also, you want to use #media only screen, instead of #media screen. This targets only browsers that can understand media queries.
Hope this helps. Feel free to ask any questions about the code in the comments section.
HTML
<div id="page">
<div id="navbar">
<div id="logo"></div>
<ul id="container">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Media</li>
</ul>
</div>
</div>
CSS
#import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);
body {
background: #f3f3f3;
font-family: 'Open Sans', sans-serif;
margin: 0 auto;
}
#page {
height: 600px;
}
#navbar {
position: relative;
width: 100%;
height: 50px;
top: 75px;
background-color: #fefefe;
}
#logo {
width: 150px;
height: 150px;
border-radius: 75px;
background-color: #333;
position: absolute;
top: -50px;
left: 50%;
transform: translate(-50%);
}
#container {
position: absolute;
top: 13px;
padding: 0;
margin: 0;
width: 100%;
}
#navbar li {
display: none;
}
#navbar li a {
color: #333333;
text-decoration: none;
font-size: 0.75em;
font-weight: bold;
text-transform: uppercase;
}
#navbar li:nth-child(3) a,
#navbar li:nth-child(4) a {
position: relative;
left: 100%;
}
#media only screen and (min-width: 569px) {
#navbar li {
display: inline-block;
list-style: none;
width: 20%;
float: left;
text-align: center;
}
}
#media only screen and (min-width: 769px) {
#logo {
left: 50px;
transform: translate(0);
}
#container {
width: 30%;
right: 50px;
}
#navbar li {
width: 25%;
}
#navbar li:nth-child(3) a,
#navbar li:nth-child(4) a {
left: 0;
}
}
EDIT:
In response to your additional questions:
:nth-child() is a pseudo-class selector. It selects the child that is the desired ordinal (i.e. 1st, 2nd, 3rd, 4th, 5th, etc.) of its parent. The ordinal is designated by the number in parentheses. So if you look at my code, you'll see li:nth-child(3). This means: select all li elements that are the 3rd child of their parent. If the 3rd child isn't an li element, it will NOT be selected.
In regards to your media query question: The reason I placed the left: 50%; transform: translate(-50%); code outside of the media query, is because I'm using the mobile first method of coding. Mobile First design is the current standard for responsive design. It means that you are designing for the smallest screen (mobile) first. So, I am centering the logo, and removing the text links, outside of the media query. Then I target the tablet in my first media query: #media only screen and (min-width: 569px). This targets screens that have a resolution of 569px or higher, and adds the text links in the nav bar. Finally, I use another media query: #media only screen and (min-width: 769px) to target larger screens (computers), with a screen size of 769px or higher. In this media query, I position the logo on the left and the text links on the right.
NOTE: In your code, you are using desktop first design. You are designing for the large screen first. Then you use media queries for smaller sizes. That's why your media query uses max-width. I'm using mobile first design. I am designing for the small screen first. Then I use media queries for larger sizes. That's why my media query uses min-width.
Hope this helps!
I currently have this menu:
(source: gyazo.com)
I am using Twitter Bootstrap 3, the .container class. What I am trying to do is, making the elements width scale automatically according to the amount of the elements in the ul + the width of the container.
I have attempted to do this, but this doesn't work:
#media (min-width: 428px) and (max-width: 991px) {
.container > #vote > #vote-list {
width: 100%;
background-color: red;
padding: 0;
}
#vote-list li {
width: auto;
float: left;
display: table-cell;
margin-left: 1px;
padding-left: 10px;
padding-right: 10px;
}
}
As you see I am firstly accessing #vote using .container because #vote is child of .container. #vote is basically the dark area you see that the nav is contained in. #vote-list is child of #vote.
#vote {
background-color: #161616;
min-height: 560px;
width: 100%;
}
I have tried changing the child selectors to direct access, but it is giving me the same results.
The html:
<body class="container">
<section id="vote">
<ul id="vote-list">
<li>MyNav</li>
<li>MyNav</li>
<li>MyNav</li>
<li>MyNav</li>
<li>MyNav</li>
</ul>
</section>
</body>
What did I do wrong? Let me know if you need more information
try this:
#vote-list {
width: 100%;
background-color: red;
padding: 0;
display: table; /* add this */
}
#vote-list li {
/* remove float:left; */
display: table-cell;
margin-left: 1px;
padding-left: 10px;
padding-right: 10px;
}
<section id="vote">
<ul id="vote-list">
<li>MyNav</li>
<li>MyNav</li>
<li>MyNav</li>
<li>MyNav</li>
<li>MyNav</li>
</ul>
</section>