Nav also moves when applying margin top in TailWind - html

When I try to apply margin-top to a container, the container moves, but so does the nav bar, do you guys know what can I do? I am using TailwindCSS, please check the images:
First Image
Second Image
<header>
<nav class="w-full bg-white fixed flex border-b-2 border-opacity-50 z-10">
<a class="" href="#home">
<img class="mx-48 p-2 w-24" src="assets/logo/dfnr.png" alt="Diefonro logo" />
</a>
<ul class="nav-list flex text-gray-500 relative left-40 font-bold mt-1">
<li class="p-3 mx-2 hover:text-gray-800">
Home
</li>
<li class="p-3 mx-1 hover:text-gray-800">
About
</li>
<li class="p-3 mx-2 hover:text-gray-800">
Services
</li>
<li class="p-3 mx-2 hover:text-gray-800">
Portfolio
</li>
<li class="p-3 mx-2 hover:text-gray-800">
Contact
</li>
</ul>
</nav>
</header>
<main>
<div class="container mt-16 mx-auto bg-gray-700" id="home">
<p class="text-3xl">Hi! This is</p>
<h1 class="title gradient-title">DIEFONRO</h1>
<p class="pos-text">Junior Front-End Developer</p>
<button class="hire">HIRE ME</button>
<button class="get-cv">GET CV</button>
<img src="assets/img/Diefonro.png" alt="diefonro's ilustration" class="main-img" />
</div>
</main>

I think adding top-0 to the <nav> will fulfill your wish.

Related

Image alignment on html page with bootstrap

I am trying to fix these photos to be a tiny more centered. Maybe shift down a little and to the left. I am using all bootstrap and do not have any css attached to this. It is all working within the ul tags. Any help appreciated.
Page Screen Shot
<ul>
<li>
<a href="https://example.com" class="dropdown-header">
<strong>Example</strong><br />
<span class="megasubheader">| NEWS AND CONTENT </span>
</a>
</li>
<li class="dropdown-divider"></li>
<li class="list-group">
<a href="https://example.com" class="list-group-item mt-2" aria-current="true">
<div class="d-flex w-100 justify-content-between">
<img id="imgsrc1" width="75px" height="75px" class="rounded mx-2">
<span id="Htitle1" style="font-size: 14px"></span>
</div>
</a>
<a href="https://example.com" class="list-group-item mt-2" aria-current="true">
<div class="d-flex w-100 justify-content-between">
<img id="imgsrc2" width="75px" height="75px" class="rounded mx-2">
<span id="Htitle2" style="font-size: 14px"></span>
</div>
</a>
<a href="https://example.com" class="list-group-item mt-2" aria-current="true">
<div class="d-flex w-100 justify-content-between">
<img id="imgsrc3" width="75px" height="75px" class="rounded mx-2">
<span id="Htitle3" style="font-size: 14px"></span>
</div>
</a>
</li>
</ul>
Use my-auto on your img element.
Would this help your situation ?
<div class="d-flex w-100 justify-content-between flex-row align-items-center">
<img id="imgsrc3" width="75px" height="75px" class="rounded me-2">
<span id="Htitle3" style="font-size: 14px"></span>
</div>
More over bootstrap spacing:
https://getbootstrap.com/docs/5.0/utilities/spacing/
I saw that your text is long, so that has an effect too on it, with less text for me it works fine. hope this helps.

Background image that spans multiple divs but does not use fixed background position

So I'm creating a website for a business, and I want to have a background image that is on the nav-bar along the top and then when you click the hamburger button and the hidden menu appears it also has that background image. The problem I have is when I use Background Position: fixed; the background image eventually is no longer on the divs and they are left with just the background color. Is there a way to have an image that spans both divs but also don't scroll with the page?
`
.background-image-nav {
background-image: url("/src/images/black-squiggles.png");
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
max-width: 100%;
}
<nav class="background-color-foot background-image-nav shadow-lg box-border w-full max-w-full z-50">
<div class="max-w-6xl mx-auto px-4">
<div class="flex justify-between">
<div class="flex space-x-7">
<!-- Website Logo -->
<a href="#" class="flex items-center py-4 px-2 max-w-[130px]">
<img src="/src/logo_transparent.png" alt="Logo" class="h-8 w-full mr-2" />
<!-- <span class="font-semibold text-white text-lg"
>Design Potato</span
> -->
</a>
</div>
<!-- Primary Navbar items -->
<div class="hidden md:flex items-center space-x-1">
<a
href=""
class="py-4 px-2 text-white-exec border-b-4 border-white hover:text-white-exec font-semibold"
>Home</a
>
<a
href=""
class="py-4 px-2 text-white-exec font-semibold hover:text-white-exec transition duration-300"
>Services</a
>
<a
href=""
class="py-4 px-2 text-white-exec font-semibold hover:text-white-exec transition duration-300"
>Contact Us</a
>
<a
href=""
class="py-4 px-2 text-white-exec font-semibold hover:text-white-exec transition duration-300"
>About Us</a
>
</div>
<div class="md:hidden h-full my-auto">
<button class="mobile-menu-button space-y-2 p-2.5">
<span class="block w-7 h-0.5 bg-white-exec"></span>
<span class="block w-7 h-0.5 bg-white-exec"></span>
<span class="block w-7 h-0.5 bg-white-exec"></span>
</button>
</div>
</div>
</div>
<!-- mobile menu -->
<div
class="hidden md:hidden mobile-menu absolute h-60 w-full z-50 bg-brown-exec background-image-nav pt-5 m-auto rounded-b-md"
>
<ul class="text-center h-full space-y-5 text-2xl">
<li class="">
<a href="" class="text-white-exec border-b-4 hover:text-white-exec border-white font-semibold"
>Home</a
>
</li>
<li>
<a
href=""
class="text-white-exec font-semibold hover:text-white-exec transition duration-300"
>Services</a
>
</li>
<li>
<a
href=""
class="text-white-exec font-semibold hover:text-white-exec transition duration-300"
>Contact Us</a
>
</li>
<li>
<a
href=""
class="text-white-exec font-semibold hover:text-white-exec transition duration-300"
>About Us</a
>
</li>
</ul>
</div>
</nav>
If I set background-attachment to cover the image appears twice, once per div.

Creating a sidebar using reactjs and bootstrap

I have a react project in which I need bootstrap sidebar which looks one of metronics https://preview.keenthemes.com/metronic/demo1/index.html theme. I tried hard but couldn't copy it as I am not master of CSS.I need sidebar same as metronics. How could I make sidebar with the rotating caret and icons.
I have tried react-bootstrap but couldn't make it. Do i need to add custom css?
Thanks in advance
My sidebar component :
function SideBar(){
return(
<nav className="navbar navbar-dark align-items-start sidebar sidebar-dark accordion bg-gradient-primary p-0">
<div className="container-fluid d-flex flex-column p-0">
<Link className="navbar-brand d-flex justify-content-center align-items-center sidebar-brand m-0" href="#">
<div className="sidebar-brand-icon rotate-n-15"></div>
<div className="sidebar-brand-text mx-3"><span>ProjectName </span>
</div>
<Button className="rounded-circle border-0" ></Button>
</Link>
<ul className="nav navbar-nav text-light">
<li className="nav-item">
<Link to="/index">
<FaIcons.FaTachometerAlt/>
<span>Dashboard</span>
</Link>
</li>
<li className="nav-item">
<Link to="/profile">
<FaIcons.FaUser/>
<span>Profile</span>
</Link>
</li>
<li className="nav-item">
<Link to="/table">
<FaIcons.FaTable/>
<span>Table</span>
</Link>
</li>
</ul>
</div>
</nav>
)
}

Any idea on why my container is overlapping my header?

I am trying to figure out why my container is overlapping my header when it comes to the small screen section. My goal is for the container (and all the contents inside of it) to be underneath my header on the page. It works perfectly for the extra small screen part, but the small screen is where it all goes wrong. I am just beginning my journey into bootstrap so please ignore my sloppy code.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<link rel="stylesheet" href="css/grid-system-test.css">
</head>
<body>
<header>
<div class="d-sm-none"> <!-- Navbar is only viewable on extra small screens -->
<div class="white-block">
<img class="comp-logo mx-auto d-block" src="img/logo.png" alt="company logo">
</div>
<nav class="text-center">
<div class="col-12">
<h2 class="thin-font">codeup design</h2>
</div>
<div class="col-12">
<ul class="nav xs-nav">
<li class="nav-item">
<a class="nav-link" href="#"><p>SERVICES</p></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><p>WORK</p></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><p>BLOG</p></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><p>CONTACT</p></a>
</li>
</ul>
</div>
</nav>
</div>
<div class="d-none d-sm-block"> <!------------------------ NAVBAR FOR SMALL SCREEN STARTS HERE -------------------------->
<nav class="white-bg text-center small-nav">
<ul class="nav justify-content-center">
<li class="small-nav-item">
<a class="small-nav-link" href="#">SERVICE</a>
</li>
<li class="small-nav-item">
<a class="small-nav-link" href="#">WORK</a>
</li>
<li class="small-nav-item">
<a class="small-nav-link" href="#"><img class="comp-logo comp-logo-small" src="img/logo.png"></a>
</li>
<li class="small-nav-item">
<a class="small-nav-link" href="#">BLOG</a>
</li>
<li class="small-nav-item">
<a class="small-nav-link" href="#">CONTACT</a>
</li>
</ul>
<div class="col-12">
<h2 class="thin-font">codeup design</h2>
</div>
</nav>
</div>
</header>
<!-------------------------------------------- CONTAINER STARTS HERE -------------------------------------------------->
<div class="container-fluid text-center">
<h2>VISUAL DESIGN & WEB DEVELOPMENT</h2>
<h4 class="park-city-text">FROM PARK CITY, UTAH</h4>
<div class="row">
<div class="col-6">
<div class="circle-big red-bg ml-4">
<h6 class="text-light center-txt">DESIGN</h6>
</div>
</div>
<div class="col-6">
<div class="circle-big orange-bg mr-4">
<h6 class="text-light center-txt">DEVELOP</h6>
</div>
</div>
</div>
<div class="row">
<div class="col-6">
<div class="circle-big green-bg ml-4 circle-margin-top">
<h6 class="text-light center-txt">SUPPORT</h6>
</div>
</div>
<div class="col-6">
<div class="circle-big blue-bg mr-3 circle-margin-top">
<h6 class="text-light center-txt">HOST</h6>
</div>
</div>
</div>
<!-- end of circle images -->
<p class="selectW">SELECTED WORK</p>
<img class="ipad rounded" src="img/apple-ipad.jpg" alt="apple on ipad">
<div class="row">
<div class="col-6">
<p class="float-left ml-3">FEATURED PROJECT</p>
</div>
<div class="col-6">
<div class="circle-sm red-bg small-circle-text float-right mr-2"><p class="font-weight-bold">D</p></div>
<div class="circle-sm orange-bg small-circle-text float-right mr-2"><p class="font-weight-bold">D</p></div>
<div class="circle-sm green-bg small-circle-text float-right mr-2"><p class="font-weight-bold">S</p></div>
<div class="circle-sm blue-bg small-circle-text float-right mr-2"><p class="font-weight-bold">H</p></div>
</div>
</div>
</div>
</body>
</html>

How to vertically center a div with respect to the remaining height

I made a webpage with a "sticky" footer(the footer is at the bottom of content if the content is large, or at the bottom of the viewport if the content is small) by using flexbox. I am now trying to make it so the content will be at the center of the remaining height(vh - height of navbar - height of footer) if the content is small enough. Below is an image to demostrate what I just said.
Here is my code.
<div id="app">
<div>
<div class="d-flex flex-column full-height">
<div id="div-top" class="d-flex flex-column" style="flex: 2">
<nav class="navbar navbar-expand-md navbar-dark bg-primary sticky-top">
<div class="container">
<a class="navbar-brand" href="/">
<img class="logo d-inline-block align-top" src="https://cdn4.iconfinder.com/data/icons/new-google-logo-2015/400/new-google-favicon-256.png" width="30" height="30"> Brand</a>
<button type="button" class="navbar-toggler">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse">
<ul class="ml-auto navbar-nav">
<li class="nav-item">
<a class="nav-link" aria-current="false" href="/about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="false" href="/aaar">Ada</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="false" href="/bbbr">sdfsdfs</a>
</li>
</ul>
</div>
</div>
</nav>
<br>
<div class="container d-flex align-items-center justify-content-center h-100" id="div-1">
<div class="row w-100">
<div class="text-center col col-md-12 col-lg-6">
<img class="logo" src="https://cdn4.iconfinder.com/data/icons/new-google-logo-2015/400/new-google-favicon-256.png" width="256" height="256" alt="logo">
<h2 class="pt-2 pb-3 font-weight-normal">Description</h2>
<div>
Add
<p>description</p>
</div>
<p class="pt-4 text-muted">v1.0.0</p>
</div>
<div class="d-none d-lg-block col col-lg-6">test</div>
</div>
</div>
</div>
<footer class="footer">
<div class="text-center container">
<span class="d-block">Copyright © 2018</span>
<span class="text-muted">Some text here</span>
</div>
</footer>
</div>
</div>
</div>
#div-1 {
background-color: #00ff00;
}
.full-height {
height: 100vh;
}
.footer {
margin: auto auto 0 auto;
width: 100%;
padding-top: 1.2rem;
padding-bottom: 1.2rem;
background-color: #ff0000;
}
The height of the content won't change, I'm just trying to support multiple screen sizes. I have encountered 2 problems by using this approach. First, it does not work on landscape mode on mobile(emulated using chrome dev tools). Second, the navbar shrinks in height.
jsfiddle is available here. You can also compare it with the original version. Adding /embedded/result/ to the end of the url will open the result in fullscreen. Thanks for helping!
If you change the following it will work as you asked for:
change to min-height: 100vh in the .full-height rule
remove align-items-center/h-100 and add m-auto in the id="div-1" elements class list
Do note, the <br> you had after the </nav> in the markup is invalid, so i removed it. If you want a gap there, use margin's padding's
Updated fiddle
Stack snippet
#div-1 {
background-color: #00ff00;
}
.full-height {
min-height: 100vh;
}
.footer {
margin: auto auto 0 auto;
width: 100%;
padding-top: 1.2rem;
padding-bottom: 1.2rem;
background-color: #ff0000;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet"/>
<div id="app">
<div>
<div class="d-flex flex-column full-height">
<div id="div-top" class="d-flex flex-column" style="flex: 2">
<nav class="navbar navbar-expand-md navbar-dark bg-primary sticky-top">
<div class="container">
<a class="navbar-brand" href="/">
<img class="logo d-inline-block align-top" src="https://cdn4.iconfinder.com/data/icons/new-google-logo-2015/400/new-google-favicon-256.png" width="30" height="30"> Brand</a>
<button type="button" class="navbar-toggler">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse">
<ul class="ml-auto navbar-nav">
<li class="nav-item">
<a class="nav-link" aria-current="false" href="/about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="false" href="/aaar">Ada</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="false" href="/bbbr">sdfsdfs</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container d-flex justify-content-center m-auto" id="div-1">
<div class="row w-100">
<div class="text-center col col-md-12 col-lg-6">
<img class="logo" src="https://cdn4.iconfinder.com/data/icons/new-google-logo-2015/400/new-google-favicon-256.png" width="256" height="256" alt="logo">
<h2 class="pt-2 pb-3 font-weight-normal">Description</h2>
<div>
Add
<p>description</p>
</div>
<p class="pt-4 text-muted">v1.0.0</p>
</div>
<div class="d-none d-lg-block col col-lg-6">test</div>
</div>
</div>
</div>
<footer class="footer">
<div class="text-center container">
<span class="d-block">Copyright © 2018</span>
<span class="text-muted">Some text here</span>
</div>
</footer>
</div>
</div>
</div>