You can see,
| Nav --- Logo --- Info |
This is the style I want on mobile.
Nav is left align.
Logo is center align.
Info is right align.
<div id="navbar">
<div class="item">Nav</div>
<div class="item">Logo</div>
<div class="item">Info</div>
</div>
What styles do I have to implement for each item to get what I want?
Please, Thanks.
By far the easiest way to achieve this is using flexbox. To limit it to mobile devices, you'd need to wrap it in a #media query, which, for Bootstrap, is below 768px
#navbar {
/*
* place non-mobile styles here
* For example, to hide the navbar outside mobile...
*/
display: none;
}
#media (max-width: 767px) {
#navbar {
display:flex;
justify-content: space-between;
align-items: center; /* optional, to center vertically */
}
}
<div id="navbar">
<div class="item">Nav</div>
<div class="item">Logo</div>
<div class="item">Info</div>
</div>
Use flexbox make the parent flex and space around the content.
Fiddle
.navbar{
max-width: 600px;
border: 1px solid black;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
}
<header class="navbar">
<div class="menu">
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</div>
<div class="logo">
<img src="https://placehold.it/88x88" alt="logo">
</div>
<div class="info">
<p> Info about the website </p>
</div>
</header>
Related
I am trying to center just 2 elements in the center of a page. This is a page with clickable icons for your social links. But I need to find a way to center them in a way that they are centered no matter the device's size. Please bare in mind this is my second day ever developing. Any feedback is highly appreciated!
Here is what it should look like in the end
Here is the code I have
<div class="fresh">
<img width="160" src=logo.svg>
</div>
<div class="icons-inline">
<ul class="icons">
<svg>insert super long svg</svg>
<svg>insert super long svg</svg>
<svg>insert super long svg</svg>
<svg>insert super long svg</svg>
<svg>insert super long svg</svg>
<svg>insert super long svg</svg>
<svg>insert super long svg</svg>
</ul>
</div>
css:
.fresh {
color: #E3EEF8;
text-align: center;
padding-top: 20%;
}
.icons {
text-align: center;
padding-right: 1.5%;
}
I'm currently just using text-align and then setting the padding to 20% on the top text so that it pushes both of them down and appears centered only on MY specific screen. But I want it to work on phones, other monitors, etc.
use flex-box, try this:
You can skip the * {...} since it will override every element in your document, and you'll have to set margin and padding manually
*{
box-sizing: border-box;
padding: 0;
margin: 0;
}
.flex-container{
display: flex;
flex-flow: row wrap; /* can also try column wrap */
align-items: center;
justify-content: center;
}
#main-container{ /* this will be the size of your browser window */
width: 100%;
height: 100vh;
}
html:
<section class="flex-container" id="main-container">
<!-- your things here -->
</section>
if you want an ul to show li elementos horizontally just add flex-container class to it, it will show horizontally, then you can add this rule ul.flex-container li to treat those kind of list better, e. g:
ul.flex-container li{
margin: 15px 0 0 15px;
}
your code could look like this:
<section class="flex-container" id="main-container">
<ul class="flex-container">
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ul>
</section>
you'll have a main container with the size of fhe window with its elements centered, inside youll have a list with its elements horizontally aligned
I like to use this approach:
.pageContainer {
display: grid;
place-items: center;
min-height: 100vh;
}
You can read more about it directly from MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/place-items
Create a container at least as big as the screen, and align the content to the center of the container.
The centering of elements can be handled by Flexbox. You just need to make sure that the container that holds the logo and the list of social media icons is as big as any screen the user might have. You can use viewport-percentage sizes for that, for example min-height: 100vh means “make the height of this element at least 100 percent of the viewport height”, where viewport is the size of the browser window.
Here’s a working solution:
body {
margin: 0;
}
main {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
img {
margin-bottom: 16px;
}
ul {
display: flex;
list-style-type: none;
padding: 0;
}
li:not(:last-of-type) {
margin-right: 16px;
}
<main>
<img src="https://picsum.photos/id/237/280/120" alt="Logo" />
<ul>
<li>Icon 1</li>
<li>Icon 2</li>
<li>Icon 3</li>
<li>Icon 4</li>
<li>Icon 5</li>
<li>Icon 6</li>
<li>Icon 7</li>
</ul>
</main>
okay so, im trying to make my navigation bar responsive and im having some troubles
my html and my css
#media (max-width: 600px) {
.toggle-btn {
display: flex;
}
.logo {
display: none;
}
header {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.row ul {
display: flex;
flex-direction: column;
}
}
<header>
<div class="container">
<a href="" class="toggle-btn">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="row">
<img src="myLogo.png">
<nav>
<ul>
<li>Home</li>
<li>Work</li>
<li>About us</li>
<li>Support</li>
</ul>
</nav>
</div>
</div>
</header>
okay so, i made the li's display in a column so far. And now i want to get them to the center of the page. And i have tried so so much like justify-content: center; and justify-items: center; and text-align center; i dont know how to do this could someone help please?
Thanks :)
align-items: flex-start; should be align-items: center;
I would suggest going through a few articles on Flexbox, this would be a good start.
First time messing around with a grid layout. Here is what I have so far:
http://fordsseafoodrockhall.com/marina/index.html#
My question is, how to I center the links in my Horizontal nav bar? As can be seen Im left with a little extra space on the right side then I am on the left.
HTML:
<div class="row">
<div class="twelve columns">
<ul class="nav-bar">
<li class="active">Home</li>
<li>Marina</li>
<li>Services</li>
<li>Amenities</li>
<li>Activities</li>
<li>Photos</li>
<li>Yacht Club</li>
<li>Directions</li>
<li>Contact Us</li>
</ul>
</div>
CSS:
.nav-bar {
height: 40px;
background: #435d78;
margin-top: 20px;
padding: 0;
color: #fff;
text-align:center; }
Add this to your existing code:
.nav-bar {
display: flex;
}
.nav-bar > li.active {
flex-grow: 1;
}
The flex-grow property distributes free space among sibling elements with the property applied.
Set display: flex on the parent in order to enable the use of flex properties.
I have a navigation menu (header menu) in my web page which is actually takes dynamic content. The dynamic menu items are loaded into ul>li>{dynamic_content}. I want this navigation bar (I mean the ul ) in the center of the section, not vertically but horizontally. I can have text-align:center because it has multiple children tags.
Also I can't do the following,
.class{
width:50%;
margin-left:auto;
margin-right:auto;
}
because I can't set a width since this is a DYNAMIC navigation.
You may think why I can't try
.class{
position:absolute;
left:50%;
transform:translateX(-50%);
}
This is also can not be done, because I can't set the position:absolute since it's going to be a fixed header on scroll. It make some position problems in responsive.
I'm looking for an alternative to solve this problem.
You can use justify-content: center from flexbox.
.container {
display: flex;
justify-content: center;
}
<div class="container">
<span>Title 1</span>
<span>Title 2</span>
<span>Title 3</span>
</div>
Using flexbox to center the list on the page will work.
nav {
width: 100%;
display: flex;
justify-content: center;
}
ul {
margin: 0;
display: flex;
list-style: none;
}
li:not(:last-child) {
margin-right: 1rem;
}
<nav>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</nav>
If you are looking for old browsers support, another option would be using display table as it is explained here
.something-semantic {
display: table;
width: 100%;
}
.something-else-semantic {
display: table-cell;
text-align: center;
vertical-align: middle;
}
<div class="something-semantic">
<div class="something-else-semantic">
Unknown stuff to be centered.
</div>
</div>
I think I figured it out a new way to align contents Horizontally.This works nice to me and have no issue with browser compatibility.
Wrapped the navigation with a div and set text-align:center and added display:inline-block to the ul that I wanted to center.
div {
text-align: center;
}
ul {
display:inline-block;
list-style-type: none;
}
ul>li{
float:left;
}
<div>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</div>
I don't know how to put <h1> heading exactly on center of the page using a flexbox.
Here is a link: https://jsbin.com/movevezesi/edit?html,css,output
Desired effect: https://tutorialzine.com/media/2016/06/landing-page-hero.jpg
HTML:
<div class="wrap">
<header class="header">
<a class="logo" href="#">logo</a>
<ul class="nav">
<li>Features</li>
<li>Pricing</li>
<li>Sign In</li>
<li>Free Trial</li>
</ul>
</header>
<div class="hero">
<h1>how to center horizontally and vertically this text ???</h1>
<h2>any</h2>
<h3>ideas???</h3>
</div>
</div>
css:
You'll want to nest your flex boxes and change their direction to column. I put together an example using flexbox if you want to continue using that instead of a position 50% hack:
.wrap {
display: flex;
/*
flex-direction: column keeps the nav and
hero in vertical alignment
*/
flex-direction: column;
border: 1px solid red;
height: 500px;
}
.hero {
display: flex;
/*
again, using flex-direction:column to keep
the nested headers in vertical alignment
*/
flex-direction: column;
/*
flex-grow tells .hero to grow along the main
flex axis of its parent. in this case we set
wrap to flex-direction:column, so .hero stretches
vertically
*/
flex-grow: 1;
/*
justify-content sets the children's layout
along the parent's main axis. in this case
the headers will group up in the vertical middle
of .hero
*/
justify-content: center;
/*
align-items sets the children's layout perpendicular
to the parent's main axis. so in this case they'll bunch up
along the horizontal center
*/
align-items: center;
border: 1px solid red;
}
.hero > * {
border: 1px solid black;
/*
without this text-align, the headers would
be centered horizontally, but the text inside those
headers would still be left-aligned
*/
text-align: center;
}
<div class="wrap">
<header class="header">
<a class="logo" href="#">logo</a>
<ul class="nav">
<li>Features</li>
<li>Pricing</li>
<li>Sign In</li>
<li>Free Trial</li>
</ul>
</header>
<div class="hero">
<h1>how to center horizontally and vertically this text ???</h1>
<h2>any</h2>
<h3>ideas???</h3>
</div>
</div>
You could use the next class. It will center horizontally and vertically the element.
.centerElement{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="hero centerElement">
<h1>how to center horizontally and vertically this text ???</h1>
<h2>any</h2>
<h3>ideas???</h3>
</div>
Hoping it helps.