I tried several times, float: right or display: inline-block, but it didn't work on my side. Can anyone guys help me to achieve it? I want to display my navigation next to each other just like below.
I tried to run several codes just what I mention above. But seems it need your help to work it properly.
.menu {
list-style-type: none;
display: inline-block;
padding: 0 11px;
font-size: 1.5rem;
margin-right: 6rem;
font-family: "Montserrat", sans-serif;
}
ul li .link {
position: relative;
display: inline-block;
}
ul li a {
text-decoration: none;
text-transform: uppercase;
}
.head {
position: relative;
text-align: right;
width: 100%;
padding: 22px 48px 25px;
border-bottom: 1px solid #f5f5f5;
}
div .logopix {
height: 5rem;
display: inline-block;
font-size: 0;
top: 1.1rem;
left: 37px;
position: absolute;
}
<div class="head">
<img class="logopix" src="./images/logo.png" alt="HUB Motivator Logo" >
<ul class="menu">
<li class="link"> About </li>
<li class="link"> Contact Us </li>
</ul>
</div>
add css in
.menu {
display: flex;
justify-content: flex-end;
}
Following same technique as you used with inline-block, to display li on same line add:
ul li {
display: inline-block;
}
Here is the code: Codepen
You can achieve the same requirement by writing very minimal semantic code and styling. Please check the code below.
Semantic HTML code
<header class="header">
<img src="http://via.placeholder.com/150x60"/>
<nav class="navbar">
About
Services
Contact
</nav>
</header>
CSS Style
.header {
display: flex;
justify-content: space-between;
align-items: center;
}
.navbar a {
padding-left: 10px;
font-size: 20px;
}
View Demo : jsfiddle
Related
So there is the letter spacing/gap between each word and i want to minimize that, but when i try to do it the only thing that shrinks is the button itself.
.navbar {
position: fixed;
top: 0;
right: 7%;
z-index: 10;
display: flex;
text-align: center;
display: table;
}
.navbar ul {
flex: 1;
text-align: right;
padding: 40px;
background: transparent;
}
.navbar ul li {
display: inline-block;
list-style: none;
margin: 10px 30px;
background: transparent;
}
.navbar ul li {
display: inline-block;
list-style: none;
margin: 10px 30px;
background: transparent;
}
.navbar ul li a {
color: #6dffe7;
text-decoration: none;
letter-spacing: 1px;
font-size: 15px;
cursor: pointer;
}
body { background: black; }
<div class="page">
<nav class="navbar">
<ul>
<div class="download-btn">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
<li> Download Resume</li>
</div>
</ul>
</nav>
</div>
Thank you for your help
I think you are trying to recreate the navbar as depicted in the image provided. As such, you need to following rules:
Horizontal navbar with a fixed height (I assumed it to be 100px).
All links except for the button should appear on the left and separated by some gap.
The "Download Resume" button needs to appear on the right side of your navbar.
There should be some padding at the left and right side of the navbar (I assumed this to be 2rem).
To achieve, this you need to set flex layout on your navbar, so that we can use the align-items: center to center the links vertically inside the navbar. We then need to set flex layout on the ul itself, and give it flex-direction: row with some gap: 2rem.
Now to place the button on the far right side of your navbar, you need to remove it from the ul inside the navbar, and place it as a sibling below it. And set justify-content: space-between on your navbar. This should move the links to far left, and the button to far right.
Additionally, we can style the visuals by giving navbar a background-color and color. We then inherit this color onto the anchor links a. We also set list-style: none and text-decoration: none on the ul and a respectively, to achieve the look of the image linked in the question.
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.navbar {
padding: 0 2rem;
position: fixed;
top: 0;
width: 100%;
background-color: #12182b;
color: #6dffe7;
height: 100px;
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar ul {
display: flex;
flex-direction: row;
align-items: center;
list-style: none;
gap: 2rem;
}
.navbar ul a {
font-size: 0.9em;
color: inherit;
text-decoration: none;
}
.navbar .btn {
font-size: 0.9em;
border: 2px solid #6dffe7;
padding: 0.6em;
text-decoration: none;
color: inherit;
font-weight: bold;
}
<div class="page">
<nav class="navbar">
<ul>
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
</ul>
Download Resume
</nav>
</div>
Looking at the image it seems like you want to adjust nav items spacing instead of letter spacing/gap.
You can try to adjust paddings/margins on navbar ul and the li child items.
Also, you have duplicate display prop on .navbar you can remove one.
.navbar {
background-color: #12182b;
position: fixed;
top: 0;
left: 0;
z-index: 1;
display: flex;
text-align: center;
}
.navbar ul {
flex: 1;
text-align: right;
padding: 20px;
background: transparent;}.navbar ul li {
display: inline-block;
list-style: none;
margin: 10px 20px;
background: transparent;
}
.navbar ul li {
display: inline-block;
list-style: none;
margin: 10px 20px;
background: transparent;
}
.navbar ul li a {
color: #6dffe7;
text-decoration: none;
letter-spacing: 1px;
font-size: 15px;
cursor: pointer;
}
<nav class="navbar">
<ul>
<div class="download-btn">
<li>Home</li>
<li>About</li>
<li>Work</li>
<li>Contact</li>
<li>
Download Resume </li>
</div>
</ul>
</nav>
it seems to me you use bootstrap if you do then you will to need to use !important after any styles in css
I'm having a very basic problem with the CSS in my React website, and I was looking for some help.
I have a very barebones header section set up
HTML:
<div className="nav">
<div className="menu">
Menu
</div>
<div className="logo">
<a className="title" href="/">Brand Name</a>
<a className="subtitle" href="/">Slogan</a>
</div>
<div className="lang">
<ul>
<li>FB</li>
<li>IG</li>
<li>TW</li>
</ul>
</div>
</div>
CSS:
body {
margin: 0;
padding: 0;
}
.nav{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
color: white;
text-decoration: none;
font-family: Visual;
letter-spacing: 1px;
width: 100%;
.menu{
a{
text-decoration: none;
color: white;
letter-spacing: 1.3px;
font-size: 1.2rem;
}
}
.logo{
.title{
font-size: 2rem;
}
.subtitle{
text-align: center;
margin-top: 5px;
}
a{
text-decoration: none;
color: white;
display: block;
}
}
.lang{
font-size: 1.2rem;
ul{
li{
display: inline;
margin-left: 10px
}
}
}
}
The flex seems to be working, but when I resize the window horizontally, the center element gets pushed off center and eventually out of the screen on one side.
Is this related to media queries?
add padding: 0; property to ul in your css
ul {
padding: 0;
li {
display: inline;
margin-left: 10px;
}
}
You can use border styling something like
border: 1px solid black;
when have problems with css. In this way, you can see which elements have unexpected properties like paddings or margins. When you use border styling for your ul, you will see it has padding. Make padding zero and your items will be centralized.
Probably very easy. But, i new to coding, this is my first personnel project. I want the list in the div to be show after the image1 and it is currently over the image
.image1 {
display: block;
margin-left: auto;
margin-right: auto;
width: 75%;
}
#list {
position: relative;
text-align: center;
color: blue;
}
ul {
padding: 20px;
list-style: none;
font-size: 40px;
}
ul li {
margin: 15px;
text-align: center;
}
<header>
<h1><strong>G.M.S.</strong> <br> Soudure Générale</h1>
<img src="images/soudeur.jpg" alt="Soudeur" class="image1">
</header>
<div id="list">
<h2>Specialités<br>Réparation et Modification</h2>
<ul>
<li>Rampe</li>
<li>Balcon</li>
<li>Escalier</li>
<li>Tourelle</li>
<li>Cloture</li>
<li>Grillage</li>
</ul>
</div>
Looks ok to me. If you are a beginer as u said, you should experiment in pages like codepen.io
Probably your problem is caused by some other css included by the content management system or site generator you are using.
You should check the applied rules using firefox inspector, or alike in browser you are running. Maybe a float, or fix size+overflow on the general img tag or the containing header.
.image1 {
display: block;
margin-left: auto;
margin-right: auto;
width: 75%;
}
#list {
position: relative;
text-align: center;
color: blue;
}
ul {
padding: 20px;
list-style: none;
font-size: 40px;
}
ul li {
margin: 15px;
text-align: center;
}
<header>
<h1><strong>G.M.S.</strong> <br> Soudure Générale</h1>
<img src="https://i.imgur.com/oqVsHoTl.jpg" alt="Soudeur" class="image1">
</header>
<div id="list">
<h2>Specialités<br>Réparation et Modification</h2>
<ul>
<li>Rampe</li>
<li>Balcon</li>
<li>Escalier</li>
<li>Tourelle</li>
<li>Cloture</li>
<li>Grillage</li>
</ul>
</div>
I want to ask about good practive in making spacing between two divs which have flexbox. For example:
header {
background-image: radial-gradient(circle, #72d6c9, #54d1ed, #7ac5ff, #bcb2fe, #f29cd9);
height: 80px;
}
.menu-section {
display: flex;
}
.nav-logo {
color: #e00986;
font-size: 25px;
margin: 0;
padding-left: 15px;
line-height: 80px;
}
nav ul {
list-style-type: none;
padding: 0;
margin: 0;
text-align: center;
}
nav ul li {
display: inline-block;
width: 150px;
position: relative;
}
nav ul li a {
text-decoration: none;
line-height: 80px;
padding: 0 10px;
display: block;
color: #e00986;
}
nav ul li a:hover {
color: #FFF;
transition-duration: 2s;
}
<header>
<nav class="menu-section">
<h1 class="nav-logo">Love ♡ Cookies</h1>
<ul>
<li>Strona główna</li>
<li>Ciastka
<ul>
<li>Torty</li>
<li>Babeczki</li>
<li>Bezy</li>
<li>Ciasta</li>
</ul>
</li>
<li>Kontakt</li>
</ul>
</nav>
</header>
Of course I can give margin-left: 550px to nav ul and it will be okay, but I don't think so that is the good practice. What's your opinion in this topic?
All you gotta do is make the parent of those two div's (the left logo and the right menu items) a display flex and justify-content: space-between or justify-content: space-around like so
.parent-div {
display:flex;
justify-content: space-between; //or space-around
}
.child-left {//doesn't matter what you put in here just so long as its a div}
.child-right {//doesn't matter what you put in here just so long as its a div}
If you have anymore question, this is where I go if I need help figuring out how to use flex: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I guess what you need is to move your navigation menu to right, reading the comments.
So solution to this would be giving space to left for your navigation(menu links). Yes you can definitely use margin-left but you do not need to specify exact pixels.
Better would be giving margin-left:auto, so that remaining space would be left on left side of your Navigation
Solution:
header {
background-image: radial-gradient(circle, #72d6c9, #54d1ed, #7ac5ff, #bcb2fe, #f29cd9);
height: 80px;
}
.menu-section {
display: flex;
}
.nav-logo {
color: #e00986;
font-size: 25px;
margin: 0;
padding-left: 15px;
line-height: 80px;
}
nav ul {
list-style-type: none;
padding: 0;
margin: 0;
text-align: center;
margin-left:auto; /*ADDED HERE - THIS IS THE TRICK :)*/
}
nav ul li {
display: inline-block;
width: 150px;
position: relative;
}
nav ul li a {
text-decoration: none;
line-height: 80px;
padding: 0 10px;
display: block;
color: #e00986;
}
nav ul li a:hover {
color: #FFF;
transition-duration: 2s;
}
<header>
<nav class="menu-section">
<h1 class="nav-logo">Love ♡ Cookies</h1>
<ul>
<li>Strona główna</li>
<li>Ciastka
<ul>
<li>Torty</li>
<li>Babeczki</li>
<li>Bezy</li>
<li>Ciasta</li>
</ul>
</li>
<li>Kontakt</li>
</ul>
</nav>
</header>
Hope this helps you.
.nav-logo
{
color: #e00986;
font-size: 25px;
margin-right: 100px;
padding-left: 15px;
line-height: 80px;
}
Use margin for outside spacing:)!
I am trying to add a div between the header and footer. Both are flex boxes, however the div in between (which in the end needs to be a slider) does not get positioned well. I am trying to get the header on top and the slider to fill up the remaining space of the view height. Only on the scroll it should show the footer (and eventually other div's as well). Somehow I have the feeling flex box is not working correctly..
Basically the same effect as this website: ArsThanea.
Another problem that I have when opening the JSFiddle is that the header and footer do not take the complete width of the view box, although the div does. When running the html and css in the browser using Gulp / Jekyll it works and it takes up the complete width.
header {
height: 130px;
background: white;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
-ms-flex-direction: row;
flex-direction: row;
width: 100%;
}
header .logo img {
height: 73px;
width: 146px;
padding-left: 60px;
}
header p {
text-transform: uppercase;
font-family: 'StratumNo1';
font-size: 14px;
margin: 0;
padding-left: 50px;
}
header .site-nav {
margin-left: auto;
}
header .site-nav ul {
list-style: none;
margin: 0;
}
header .site-nav ul li {
display: inline;
font-family: 'StratumNo1';
color: black;
margin: 10px;
text-transform: uppercase;
font-size: 14px;
}
header .site-nav ul li a {
text-decoration: none;
color: black;
}
header .site-nav ul li a:hover {
text-decoration: underline;
}
header .site-nav ul li a:first-child {
margin: 0px 10px 0 0;
}
header .search-form {
width: 300px;
height: 20px;
margin-left: 10px;
}
header .search-form .search-input {
width: 240px;
border-bottom: black 1px solid;
border-left: 0;
border-right: 0;
border-top: 0;
font-family: 'StratumNo1';
font-size: 14px;
}
header .search-form .search-input:focus {
outline: 0;
}
.footer-lockup {
height: 100px;
background-color: #1d1c1c;
width: 100%;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-align: center;
align-items: center;
position: relative;
}
.footer-lockup .copyright {
margin: 0;
color: white;
font-size: 14px;
font-family: 'Open Sans Light';
margin-left: 60px;
color: #4d4c4c;
width: auto;
}
.footer-lockup ul {
list-style: none;
margin-right: 60px;
padding: 0;
}
.footer-lockup ul li {
display: inline;
font-family: 'Open Sans Light';
font-size: 14px;
margin: 10px;
text-transform: uppercase;
}
.footer-lockup ul li:last-child {
margin-right: 0px;
}
.footer-lockup ul li a {
text-decoration: none;
color: #4d4c4c;
}
.social-logos {
position: relative;
min-width: 200px;
display: -ms-flexbox;
display: flex;
}
.social-logos .social-logo {
height: 20px;
min-width: 20px;
margin-right: 18px;
}
.social-logos .social-logo:last-child {
margin-right: 0;
}
.social-logos .social-logo .social-media {
text-align: center;
height: 20px;
cursor: pointer;
}
.social-logos .social-logo img {
height: 20px;
}
.social-logos .social-logo img.youtube {
height: 35px;
margin-top: -7px;
}
.projects-wrapper {
display: block;
background: pink;
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 130px;
}
<header>
<div class="logo">
<img src="/assets/img/YourLogo.svg" />
</div>
<p>Your Placeholder Text</p>
<nav class="site-nav">
<ul>
<li>Home
</li>
<li>About Us
</li>
<li>Services
</li>
<li>Work
</li>
<li>Contact
</li>
</ul>
</nav>
<form class="search-form">
<input placeholder="What are you looking for?" type="search" name="search-input" class="search-input" />
</form>
</header>
<div class="projects-wrapper"></div>
<footer>
<div class="footer-lockup">
<p class="copyright">© 2016 “Your Company Name” All rights reserved</p>
<div class="social-logos">
<div class="social-logo">
<div class="social-media">
<img src="/assets/img/behance-icon.svg" />
</div>
</div>
<div class="social-logo">
<div class="social-media">
<img src="/assets/img/facebook-icon.svg" />
</div>
</div>
<div class="social-logo">
<div class="social-media">
<img src="/assets/img/linkedin-icon.svg" />
</div>
</div>
<div class="social-logo">
<div class="social-media">
<img src="/assets/img/twitter-icon.svg" />
</div>
</div>
<div class="social-logo">
<div class="social-media">
<img src="/assets/img/youtube-icon.svg" class="youtube" />
</div>
</div>
</div>
<ul>
<li>Home
</li>
<li>About Us
</li>
<li>Services
</li>
<li>Work
</li>
<li>Contact
</li>
</ul>
</footer>
DEMO: JSFiddle
Taking a look at your Fiddle, there are many improvements you can make to your markup & CSS, but coming to your issue first, the reason why its not sliding down as expected is this :
position: absolute
you added this to your main div which should go in between .projects-wrapper. First thing I would say is make this a flex as well instead of block element.
Secondly, add a wrapper to your entire project body & Make that flex. like so
<div class="wrapper"> //this should be flex
<header>..</header> //this "could" be flex depending on its contents
<div class="projects-wrapper"></div>
<footer>...</footer> //this "could" be flex depending on its contents
</div>
let me know if you are facing any other problems
I made code for You, please have a look, and tell mi is it good for You.
fiddle
I use calc() to do that
Use 100vh to get the 100% view-port height and subtract the height of header and footer.
min-height: calc(100vh - 50px);
where 50px is the height of header+footer.
partial support for ie