What I am trying to do is make it so that the text can be shown over the image. I put the text in an h1 tag which is inside of a div inside of the body. However, for some reason the changes aren't registering. In-fact, any changes that I make to the text that I want to be in the center of the image, those changes aren't registering at all.
HTML:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
<title>Home Page</title>
<script type="text/javascript">
<script src="script.js" charset="utf-8"></script>
</head>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<img src="https://cdn.discordapp.com/attachments/770076532433354783/770076695368564776/vice-logoFlag1.png" width="50" height="50">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" id="homeWording" href="/Users/nixon/Documents/Website Development/Website 1 Project/home.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Gang Database
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">The Ballas</a>
<a class="dropdown-item" href="#">The Families</a>
<a class="dropdown-item" href="#">Los Santos Vagos</a>
<a class="dropdown-item" href="#">Varrios Los Aztecas</a>
<a class="dropdown-item" href="#">Marabunta Grande</a>
</div>
</li>
</ul>
<button class="btn btn-outline-success my-2 my-sm-0" id="logout" type="submit">Log out</button>
</div>
</nav>
<body>
<div class="image">
<img src="https://cdn.discordapp.com/attachments/398526333480599563/720783925395456021/TC21.png" alt="" width="100%" height="350">
<h1>TEXT IN CENTER</h1>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</html>
CSS:
body {
background-color: #212529;
}
.main {
background-color: #77857b;
width: 400px;
height: 400px;
margin: 7em auto;
border-radius: 1.5em;
box-shadow: 0px 11px 35px 2px rgba(0, 0, 0, 0.14);
}
#signInLettering {
font-size: 34px;
font-family: Optima;
padding-top: 40px;
font-weight: bold;
color: #d8e7eb;
font-style: italic;
}
.un {
width: 76%;
color: rgb(38, 50, 56);
font-weight: 700;
font-size: 14px;
letter-spacing: 1px;
background: #d8e7eb;
padding: 10px 20px;
border: none;
border-radius: 20px;
outline: none;
box-sizing: border-box;
border: 2px solid rgba(0, 0, 0, 0.02);
margin-bottom: 50px;
margin-left: 46px;
text-align: center;
margin-bottom: 27px;
font-family: 'Ubuntu', sans-serif;
}
.pass {
width: 76%;
color: rgb(38, 50, 56);
font-weight: 700;
font-size: 14px;
letter-spacing: 1px;
background: #d8e7eb;
padding: 10px 20px;
border: none;
border-radius: 20px;
outline: none;
box-sizing: border-box;
border: 2px solid rgba(0, 0, 0, 0.02);
margin-bottom: 50px;
margin-left: 46px;
text-align: center;
margin-bottom: 27px;
font-family: 'Ubuntu', sans-serif;
}
#homeWording {
padding-right: 50px;
}
.image {
position: relative;
width: 100%;
}
h1 {
position: absolute;
top: 200px;
left: 0;
width: 100%;
}
In your CSS:
.image {
position: relative;
width: 100%;
}
Possible Solution:
.image {
position: relative;
width: 100%;
text-align: center;
}
See here
Just use flexbox like this
Give a higher z-index to the H1 and change the positioning of the image to absolute.
See codepen https://codepen.io/thewhitegrizzzzli/pen/xxOqdGM
.image {
position: relative;
width: 100%;
display:flex;align-items:center;justify-content:center;
height:350px;
}
.image img {
position:absolute;top:0;
}
h1 {
z-index:10;
}
Related
I'm trying to create a landing page but I'm finding it hard to place my navbar and still keep my hero content intact the way it is. I tried using flexbox but it seems it's not working when I position my content relative and use bottom 50% to bring the nave bar to the corner.
body, html {
height: 100%;
margin: 0;
font-size: 20px;
}
.hero-image {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("building.jpg");
height: 50%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.hero-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
.btn {
text-transform: capitalize;
font-size: 1rem;
border-radius: 1rem;
border-color: white;
}
.btn:hover {
background-color: aqua ;
border-color: aqua;
}
.main {
position: relative;
display: flex;
}
li {
list-style-type: none;
display: flex;
}
li a {
text-decoration: none;
}
<body>
<div class="hero-image">
<div class="hero-text">
<h1>Welcome to ZERG</h1>
<p>Where we Strive for a better Future</p>
<button class="btn">Find out More</button>
</div>
</div>
<nav class="main">
<ul>
<li>Home</li>
<li>Pricing</li>
<li>Contact </li>
</ul>
</nav>
</body>
Do you mean a bottom navbar? Or a weird horizontally in the middle one? Here is an example of bottom navbar. Run the snippet and put in full page.
body,
html {
height: 100%;
margin: 0;
font-size: 20px;
}
.hero-image {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("building.jpg");
height: 100vh;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.hero-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
}
.btn {
text-transform: capitalize;
font-size: 1rem;
border-radius: 1rem;
border-color: white;
position: static;
margin-bottom: 100px;
}
.btn:hover {
background-color: aqua;
border-color: aqua;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<body>
<div class="hero-image">
<div class="hero-text">
<h1>Welcome to ZERG</h1>
<p>Where we Strive for a better Future</p>
<button class="btn">Find out More</button>
</div>
</div>
<nav class="navbar fixed-bottom navbar-expand-sm navbar-dark bg-dark">
<a class="navbar-brand" href="#">Bottom navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
<li class="nav-item dropup">
<a class="nav-link dropdown-toggle" href="https://getbootstrap.com/" id="dropdown10" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropup</a>
<div class="dropdown-menu" aria-labelledby="dropdown10">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
I built a django website with bootstrap template. Somehow, when the size of the website is in mobile format the expand menu feature of the navber is not expanding to show the links/items of the navbar.
Can somehow say how to fix this?
.nosh_color {
font-family: sans-serif;
font-size: 21px;
color: #5c39f9;
}
.nosh_text_color {
font-family: sans-serif;
color: #5c39f9;
}
.header_color {
color: #333333 !important;
}
.grey_color {
color: #6f6f6f;
}
.fa {
padding: 9px;
font-size: 21px;
width: 33px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
}
.fa:hover {
opacity: 0.7;
}
.fa-facebook {
background: #3b5998;
color: white;
}
.fa-linkedin {
background: #007bb5;
color: white;
}
.fa-instagram {
background: #125688;
color: white;
}
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #212529;
color: white;
text-align: center;
}
<link rel="canonical" href="https://getbootstrap.com/docs/4.1/examples/sticky-footer-navbar/" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous" />
<link rel="icon" href="/media/blog_images/nosh-white-short.png" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<nav class="navbar navbar-expand-sm navbar-dark bg-dark sticky-top">
<div class="container-fluid">
<a class="navbar-brand" href="https://nosh.tech/">
<img src="/media/blog_images/nosh-white.png" width="79" alt="" />
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="/"><div class="nosh_color">articles</div></a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="/contact"><div class="nosh_color">contact us</div></a>
</li>
</ul>
</div>
</div>
</nav>
The problem is the lack of js plugin in the code. Add these two script tags:
This is jQuery:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
This is bootstrap:
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
Run snippet:
.nosh_color {
font-family: sans-serif;
font-size: 21px;
color: #5c39f9;
}
.nosh_text_color {
font-family: sans-serif;
color: #5c39f9;
}
.header_color {
color: #333333 !important;
}
.grey_color {
color: #6f6f6f;
}
.fa {
padding: 9px;
font-size: 21px;
width: 33px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
}
.fa:hover {
opacity: 0.7;
}
.fa-facebook {
background: #3b5998;
color: white;
}
.fa-linkedin {
background: #007bb5;
color: white;
}
.fa-instagram {
background: #125688;
color: white;
}
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #212529;
color: white;
text-align: center;
}
<link rel="canonical" href="https://getbootstrap.com/docs/4.1/examples/sticky-footer-navbar/" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous" />
<link rel="icon" href="/media/blog_images/nosh-white-short.png" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark sticky-top">
<div class="container-fluid">
<a class="navbar-brand" href="https://nosh.tech/">
<img src="/media/blog_images/nosh-white.png" width="79" alt="" />
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="/"><div class="nosh_color">articles</div></a>
</li>
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="/contact"><div class="nosh_color">contact us</div></a>
</li>
</ul>
</div>
</div>
</nav>
I'm new to html and css and in my class my teach wants us to make a resume with bootstrap. Obviously the whole point of bootstrap is to be interactive in switching between devices. Im trying to work on aligning stuff and i want my navbar to disappear when I shrink the page. How could I do that?
HTML
<!-- Bootstrap Import -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- Meta Tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Titile and Style -->
<title>CadenGS's Resume</title>
<link href="https://fonts.googleapis.com/css2?family=Saira+Extra+Condensed:wght#700&display=swap" rel="stylesheet">
<script src="script.js"></script>
<link rel="stylesheet" href="style.css" type="text/css">
<!-- Navbar on Side -->
<nav class="navbar navbar-expand-lg col-lg-2 flex-direction-column justify-content-center">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Navbar List Items -->
<img id="pfp" src="Images/user_photo.jpg">
<br>
<ul class="navbar-nav f-flex flex-column">
<li class="nav-item active">
<a class="nav-link" href="#top">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#exp">Experience</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Education</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Skills</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Awards</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Examples</a>
</li>
</ul>
</nav>
<section>
<!-- Used To Scroll To Top of Page for Picture and About on Navbar -->
<p id="top">.</p>
<!-- Content Start -->
<div id="main" class="container margin-top-10%">
<h1 id="primaryName" class="display-2">Caden <span id="secondaryName">Serrato</span></h1>
<!-- Interactive Contacts -->
<p class="info" class="display-4"><em>
<a class="infoLink" onclick="call();">(786) 442-6148</a> · <a class="infoLink"
href="emailFiles/email.html" target="_blank">#cserrato21352#columbushs.com</a></em></p>
<br>
<p class="info2 display-4"><strong><em>I am a Senior High School Student looking to go into the Field of
Engineeing. My
goal is to dual major in Mechanical</em></strong></p>
<p class="info2 display-4" style="text-indent: 80px; margin-top: -10px;"><strong><em>and Engineering, and
hopefully one day work at
Boston Dynamics.</em></strong></p>
<!-- Socials -->
<div id="socials" class="d-flex flex-direction-row" style="margin-top: 7%;">
<!-- Github -->
<div class="socialHolder">
<a href="https://github.com/CadenCGS" target="_about">
<div class="socialLinks">
<img id="gitSocialImg" src="Images/gitSocial.jpg">
</div>
</a>
</div>
<!-- Instagram -->
<div class="socialHolder">
<a href="https://www.instagram.com/cadenserrato/" target="_about">
<div class="socialLinks">
<img id="igSocialImg" src="Images/igSocial.png">
</div>
</a>
</div>
<!-- Facebook -->
<div class="socialHolder">
<a href="https://www.facebook.com/ColumbusHS/" target="_about">
<div class="socialLinks">
<img id="fbSocialImg" src="Images/fbSocial.png">
</div>
</a>
</div>
<!-- LinkedIn -->
<div class="socialHolder">
<a href="https://www.linkedin.com" target="_about">
<div class="socialLinks">
<img id="liSocialImg" src="Images/liSocial.png">
</div>
</a>
</div>
</div>
</div>
<!-- Used To Scroll To Experience on Navbar -->
<p id="exp">.</p>
<hr class="pageBreak">
<!-- Experience Section -->
<div id="experience" class="container">
<h1 style="margin-top: 8%; text-indent: 35px; color: rgba(63, 158, 253, .9);"
class="subSectionName display-3">
Experience</h1>
<h1 style="text-indent: 60px; font-size: 3rem; margin-top: 2%;" class="subSectionName display-4">Robotics
</h1>
<br>
<p class="info2 display-4" style="text-indent: 120px;"><strong><em>I started my first year as a simple
builder
as
I
learned the basics of Vex. My second year I was a bit more</em></strong></p>
<p class="info2 display-4" style="text-indent: 60px; margin-top: -10px;"><strong><em> experienced and began
to
build
for advanced and
complicated
mechanisms. I built all year and ended up finishing </em></strong></p>
<p class="info2 display-4" style="text-indent: 80px; margin-top: -10px;"><strong><em>in 8th place at the
state
championship my team qualified for.</em></strong></p>
<div class="container">
<hr id="aboveDate">
<p class="info2 display-4" style="text-indent: 100px; margin-top: 2%;"><strong>Date: <span
style="color: rgba(63, 158, 253, 1);">August 2018 -
Present</span></strong></p>
</div>
</div>
</section>
<!-- Bootstrap Scripts -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous">
</script>
CSS
height: 4000px;
background-color: rgb(248, 248, 239);
}
html {
background-color: rgb(248, 248, 239);
scroll-behavior: smooth;
}
.navbar {
background-color: rgba(63, 158, 253, .9);
height: 100%;
position: fixed;
text-align: center;
flex-direction: column;
border-right: 9px solid rgb(168, 211, 255);
}
ul {
display: flex;
justify-content: center;
}
.nav-link {
transition: all .25s;
color: rgba(255, 255, 255, 0.726);
font-size: 1.5rem;
}
.nav-link:hover {
transition: all .25s;
color: white;
text-shadow: darkslategrey;
font-size: 1.7rem;
}
#pfp {
border: 9px solid rgba(255, 255, 255, .4);
border-radius: 50%;
height: 160px;
width: 160px;
position: static;
margin-bottom: 20px;
}
#primaryName {
font-family: 'Saira Extra Condensed';
color: rgb(146, 146, 146);
font-size: 6rem;
}
#secondaryName {
font-family: 'Saira Extra Condensed';
color: rgba(63, 158, 253, .9);
font-size: 6rem;
}
#main {
padding-top: 10%;
margin-left: 7%;
}
.info {
font-size: 1.7rem;
}
.info2 {
font-size: 1.3rem;
text-indent: 30px;
}
#top,
#exp {
color: rgba(63, 158, 253, 0);
}
.infoLink {
text-decoration: none;
font-family: 'Saira Extra Condensed';
color: rgb(110, 110, 110);
}
.infoLink:hover {
color: black;
}
#emailLink {
text-decoration: none;
color: black;
}
.socialHolder {
margin-left: 3%;
}
.socialLinks {
height: 65px;
width: 65px;
border-radius: 50%;
background-color: rgb(146, 146, 146);
display: flex;
justify-content: center;
transition: all .25s;
}
.socialLinks:hover {
transition: all .25s;
background-color: rgb(75, 75, 75);
}
#gitSocialImg {
border-radius: 50%;
height: 55%;
width: 55%;
margin-top: 25%;
}
#igSocialImg {
border-radius: 50%;
height: 80%;
width: 80%;
margin-top: 11%;
}
#fbSocialImg {
border-radius: 50%;
height: 55%;
width: 55%;
margin-top: 22%;
}
#liSocialImg {
border-radius: 50%;
height: 55%;
width: 55%;
margin-top: 22%;
}
.pageBreak {
border: 2px solid rgba(63, 158, 253, .9);
width: 85%;
margin-top: 4%;
margin-right: 13%;
}
.subSectionName {
font-family: 'Saira Extra Condensed';
color: rgb(146, 146, 146);
}
.subSectionInfo {
font-family: 'Saira Extra Condensed';
color: rgb(110, 110, 110);
font-size: 1.7rem;
margin-left: 60px;
}
#experience {
margin-left: 4.6%;
}
#aboveDate {
border: 2px solid rgba(63, 158, 253, .9);
width: 27.5%;
margin-left: 6%;
margin-bottom: -1%;
}```
You can write a media query and than do display: none; on the element you want to disappear.
Example:
#media (max-width: 800px) {
.navbar {
display: none;
}
}
I would like to have a custom color (#5f788a) for my navbar, however, I understand that in order to have the toggle menu in mobile version, the navbar class must be navbar-light or navbar-dark (according to Bootstrap). This, of course, overrides my custom navbar color and it looks like I have to choose between the hamburger menu OR my custom color.
Things I have tried:
1). Using ! important in CSS to override the styling;
2). Styling with the background-color attribute in CSS;
3). Styling body but this affects rest of site colors, not just navbar.
Here is the CSS:
body {
background: #fafafa;
color: #333333;
margin-top: 5rem;
}
h1, h2, h3, h4, h5, h6 {
color: #444444;
}
.bg-steel {
background-color: #5f788a;
}
.site-header .navbar-nav .nav-link {
color: #5f788a;
}
.site-header .navbar-nav .nav-link:hover {
color: #ffffff;
}
.site-header .navbar-nav .nav-link.active {
font-weight: 500;
}
.content-section {
background: #ffffff;
padding: 10px 20px;
border: 1px solid #dddddd;
border-radius: 3px;
margin-bottom: 20px;
}
.article-title {
color: #444444;
}
a.article-title:hover {
color: #428bca;
text-decoration: none;
}
.article-content {
white-space: pre-line;
}
.article-img {
height: 65px;
width: 65px;
margin-right: 16px;
}
.article-metadata {
padding-bottom: 1px;
margin-bottom: 4px;
border-bottom: 1px solid #e3e3e3
}
.article-metadata a:hover {
color: #333;
text-decoration: none;
}
#parent {
list-style: none;
width: 100%;
height: 90px;
margin: 0;
padding: 0;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
}
.article-svg {
width: 25px;
height: 25px;
vertical-align: middle;
}
.account-img {
height: 125px;
width: 125px;
margin-right: 20px;
margin-bottom: 16px;
}
.account-heading {
font-size: 2.5rem;
}
#import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css");
And the of the site:
<body>
<header class="site-header">
<nav class="navbar navbar-default navbar-expand-md navbar-light fixed-top">
<div class="container">
<a class="navbar-brand mr-4" href="/">Company Name (v0.01)</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarToggle">
<div class="navbar-nav mr-auto">
<a class="nav-item nav-link" href="/about">About</a>
</div>
<!-- SEARCH BOX-->
<!-- <form class="form-inline my-2 my-lg-0">-->
<!-- <input class="form-control mr-sm-1" id="search_box" type="search" placeholder="Find some stuff..." aria-label="Search" align="middle">-->
<!-- <button class="btn btn-outline-light my-2 my-sm-0 mr-5" type="submit" align="center">Search</button>-->
<!-- </form>-->
<!-- Navbar Right Side -->
<div class="navbar-nav">
{% if current_user.is_authenticated %}
<a class="nav-item nav-link" href="/post/new">New Post</a>
<a class="nav-item nav-link" href="/send_invites">Invite</a>
<a class="nav-item nav-link" href="/account">My Account</a>
<a class="nav-item nav-link" href="/logout"><span class="glyphicon glyphicon-log-in"></span> Logout</a>
{% else %}
<a class="nav-item nav-link" href="/login"><span class="glyphicon glyphicon-log-in"></span> Login</a>
<a class="nav-item nav-link" href="/register"><span class="glyphicon glyphicon-user"></span> Register</a>
{% endif %}
</div>
</div>
</div>
</nav>
</header>
Could it be that I should be trying to style the body? If so, wont that affect the rest of the site, not just the navbar? Thanks for your help
navbar-light and navbar-dark are helper classes, what they do is change the colour of the text from white (if navbar-dark) to black (if navbar-light), so that the text colour on your navbar doesn't conflict with the navbar colours
you can do this:
.navbar {background-color: #5f788a;}
and add the class "navbar-dark" to your nav element.
This is assuming you're using the latest version of bootstrap, 4.3
Bootstrap 4.0.0 Demo below:
body {
background: #fafafa;
color: #333333;
margin-top: 5rem;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #444444;
}
.bg-steel {
background-color: #5f788a;
}
.site-header .navbar-nav .nav-link {
color: #5f788a;
}
.site-header .navbar-nav .nav-link:hover {
color: #ffffff;
}
.site-header .navbar-nav .nav-link.active {
font-weight: 500;
}
.content-section {
background: #ffffff;
padding: 10px 20px;
border: 1px solid #dddddd;
border-radius: 3px;
margin-bottom: 20px;
}
.article-title {
color: #444444;
}
a.article-title:hover {
color: #428bca;
text-decoration: none;
}
.article-content {
white-space: pre-line;
}
.article-img {
height: 65px;
width: 65px;
margin-right: 16px;
}
.article-metadata {
padding-bottom: 1px;
margin-bottom: 4px;
border-bottom: 1px solid #e3e3e3
}
.article-metadata a:hover {
color: #333;
text-decoration: none;
}
#parent {
list-style: none;
width: 100%;
height: 90px;
margin: 0;
padding: 0;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
}
.article-svg {
width: 25px;
height: 25px;
vertical-align: middle;
}
.account-img {
height: 125px;
width: 125px;
margin-right: 20px;
margin-bottom: 16px;
}
.account-heading {
font-size: 2.5rem;
}
#import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css");
<!DOCTYPE html>
<!-- saved from url=(0044)https://stack.fleeksite.com/bootstrap-navbar -->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>TurboTobias</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<header class="site-header">
<nav class="navbar navbar-default navbar-expand-md navbar-dark fixed-top" style="background-color: rebeccapurple;">
<div class="container">
<a class="navbar-brand mr-4" href="https://stack.fleeksite.com/">Bench of Thoughts (v0.01)</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarToggle">
<div class="navbar-nav mr-auto">
<a class="nav-item nav-link" href="https://stack.fleeksite.com/about">About</a>
</div>
<!-- Navbar Right Side -->
<div class="navbar-nav">
<a class="nav-item nav-link" href="https://stack.fleeksite.com/login"><span class="glyphicon glyphicon-log-in"></span> Login</a>
<a class="nav-item nav-link" href="https://stack.fleeksite.com/register"><span class="glyphicon glyphicon-user"></span> Register</a>
</div>
</div>
</div>
</nav>
</header>
</body>
</html>
you can just add:-
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
Instead of what you wrote earlier
Navbar collapsed menu fits perfectly to the navbar in Safari browser and occupy full width of the viewport. However, in other browsers collapsed navbar is getting smaller and sticks to the very top of the page. Looks like it is not connected to the navbar itself and drops down from another reference point. Is this a browser prefix issue or something entirely wrong with my bootstrap structure?
.navbar {
height: 60px;
padding: 0;
margin: 0;
border-bottom: .1px solid black;
background: #ffffff;
}
.navbar-nav {
margin-top: 1.5em;
}
.navBut {
margin: 20px 0;
}
.navButBut {
border: 1px solid red;
}
.navbar-toggle {
border-color: black !important;
color: snow;
height: 30px;
width: 45px;
padding: 2px 5px 0;
margin: 15px 8% 15px 0;
}
.navbar-toggle:hover {
background-color: transparent !important;
}
.dropbut {
font-size: 1.5em;
color: black;
}
.fa-korvue {
color: #962715;
font-size: 3.5em;
line-height: -45%;
float: left;
margin: 5px 8% 0 12%;
}
.link_icon, .link_icon:link, .link_icon:visited, .link_icon:active {
color: #1e1e20;
padding: 0;
margin-right: 20px;
font-family: 'Arsenal', sans-serif;
font-size: 1.2em;
text-decoration: none;
outline: 0;
cursor: pointer;
background: transparent;
}
#collapse_menu {
margin-top: 1.2em;
}
#collapse_menu li a {
padding: 3px 8px;
margin-right: 5px;
border-radius: 3px;
}
#collapse_menu li a:hover {
background-color: rgba(0, 0, 0, 0.2) !important;
}
.hidden-xs {
margin-right: 18px;
}
#phone_handset {
color: black;
font-size: 1.7em;
vertical-align: 10%;
text-decoration: none;
outline: 0;
transition: 1s;
}
#phone_num {
display: inline;
margin-right: 4em;
vertical-align: 20%;
font-size: 1.3em;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<header>
<nav class="navbar navbar-fixed-top">
<div class="container-fluid">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="fa fa-th dropbut"></span>
</button>
<i class="fab fa-korvue"></i>
<div class="collapse navbar-collapse" id="myNavbar">
<ul id="collapse_menu" class="nav navbar-nav text-center">
<li><a class="link_icon scroll" name="1" href="#top_page_scroll">Начало</a></li>
<li><a class="link_icon scroll" name="2" href="#about_me_scroll">Обо мне</a></li>
<li><a class="link_icon scroll" name="3" href="#portfolio_scroll">Услуги</a></li>
<li><a class="link_icon scroll" name="4" href="#pricing_scroll">Цены</a></li>
<li><a class="link_icon scroll" name="5" href="#contact_me_scroll">Регистрация</a></li>
</ul>
<div class="navbar-nav navbar-right vertical-align">
<a id="phone_handset" class="fas fa-phone-volume hidden-xs" href="#"></a>
<a id="phone_num" class="link_icon hidden-xs" href="#">110-223-456-78</a>
</div>
</div>
</div>
</nav>
</header>
I finally fixed this issue. If you wrap navbar-toggle with <div class=“navbar-header”> then everything starts to work as expected. Now collapsed navbar occupies full width and sits in the right place. Thank #fnostro for the valuable tips.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<header>
<nav class="navbar navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="fa fa-th dropbut"></span>
</button>
<i class="fab fa-korvue"></i>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul id="collapse_menu" class="nav navbar-nav text-center">
<li><a class="link_icon scroll" name="1" href="#top_page_scroll">Начало</a></li>
<li><a class="link_icon scroll" name="2" href="#about_me_scroll">Обо мне</a></li>
<li><a class="link_icon scroll" name="3" href="#portfolio_scroll">Услуги</a></li>
<li><a class="link_icon scroll" name="4" href="#pricing_scroll">Цены</a></li>
<li><a class="link_icon scroll" name="5" href="#contact_me_scroll">Регистрация</a></li>
</ul>
<div class="navbar-nav navbar-right vertical-align">
<a id="phone_handset" class="fas fa-phone-volume hidden-xs" href="#"></a>
<a id="phone_num" class="link_icon hidden-xs" href="#">110-223-456-78</a>
</div>
</div>
</div>
</nav>
</header>