I have a topbar that works well on all page, and I'm trying to add a sidebar as well, but the style of the topbar is applied to the sidebar instead of using the rest of the code.
How can I isolate topbar css style code portion from the sidebar style css code portion?
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<link rel="stylesheet" href="/static/css/styles.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" >
<title>
{% block title %} {% endblock title %}
</title>
</head>
<body>
<!-- Topbar code start -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="{{ url_for('routes.dashboard') }}">Dashboard</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
{% if current_user.is_authenticated %}
<li class="nav-item active">
<a class="nav-link" href="{{ url_for('routes.portfolio_data_entry') }}">Portfolio Data Entry</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url_for('routes.portfolio_data_entry_dashboard') }}">Portfolio Data Entry Dashboard</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url_for('routes.stock') }}">Stock</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url_for('routes.account_page') }}">Account</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ url_for('routes.logout') }}">Log Out</a>
</li>
{% else %}
<li class="nav-item">
<a class="nav-link" href="{{ url_for('routes.login') }}">Home</a>
</li>
{% endif %}
</ul>
</div>
</nav>
<!-- Topbar code end -->
<!-- Sidebar code start end -->
<nav class="navbar navbar-expand d-flex flex-column align-item-start" id="sidebar">
<a href="#" class="navbar-brand text-light mt-5">
<div class="display-5 font-weight-bold">THANOS</div>
</a>
<ul class="navbar-nav d-flex flex-column mt-5 w-100">
<li class="nav-item w-100">
Home
</li>
<li class="nav-item w-100">
About
</li>
<li class="nav-item w-100">
Blog
</li>
<li class="nav-item dropdown w-100">
Service
<ul class="dropdown-menu w-100" aria-labelledby="navbarDropdown">
<li>Service 01</li>
<li>Service 02</li>
<li>Service 03</li>
</ul>
</li>
<li class="nav-item w-100">
Contact
</li>
</ul>
</nav>
<section class="p-4 my-container">
<button class="btn my-4" id="menu-btn">Toggle Sidebar</button>
<h1>Sidebar Navigation</h1>
<p class="text-dark">Lorem ipsum</p>
<p class="text-dark">Lorem ipsum</p>
</section>
<!-- custom js start -->
<script>
var menu_btn = document.querySelector("#menu-btn")
var sidebar = document.querySelector("#sidebar")
var container = document.querySelector(".my-container")
menu_btn.addEventListener("click", () => {
sidebar.classList.toggle("active-nav")
container.classList.toggle("active-cont")
})
</script>
<!-- custom js start -->
<!-- Sidebar code end -->
<!-- Body block container format start -->
<div class="container">
{% block body %}
{% endblock body %}
</div>
<!-- Body block container format end -->
<!-- Javascript start -->
<script src="/static/js/base.js"></script>
<!-- Javascript start -->
</body>
</html>
And this is the styles css file that starts with the topbar, then the sidebar is there too, this is where I got stuck in isolating the two from each other.
styles.css
.send-button {
background: #54C7C3;
width: 100%;
font-weight: 600;
color: #fff;
padding: 8px 25px;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.g-button {
color: #fff !important;
border: 1px solid #EA4335;
background: #ea4335 !important;
width: 100%;
font-weight: 600;
color: #fff;
padding: 8px 25px;
}
.my-input {
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
cursor: text;
padding: 8px 10px;
transition: border .1s linear;
}
.header-title {
margin: 5rem 0;
}
h1 {
font-size: 31px;
line-height: 40px;
font-weight: 600;
color: #4c5357;
}
h2 {
color: #5e8396;
font-size: 21px;
line-height: 32px;
font-weight: 400;
}
.login-or {
position: relative;
color: #aaa;
margin-top: 10px;
margin-bottom: 10px;
padding-top: 10px;
padding-bottom: 10px;
}
.span-or {
display: block;
position: absolute;
left: 50%;
top: -2px;
margin-left: -25px;
background-color: #fff;
width: 50px;
text-align: center;
}
.hr-or {
height: 1px;
margin-top: 0px !important;
margin-bottom: 0px !important;
}
#media screen and (max-width: 480px) {
h1 {
font-size: 26px;
}
h2 {
font-size: 20px;
}
}
.container .form-1 {
width: 25rem;
text-align: center;
margin: 3rem 0 0 22rem;
}
/* Sidebar section */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
background-color: #fff;
}
.navbar {
width: 250px;
height: 100vh;
position: fixed;
margin-left: -300px;
background-color: #7952b3;
transition: 0.4s;
}
.nav-link {
font-size: 1.25em;
}
.nav-link:active,
.nav-link:focus,
.nav-link:hover {
background-color: #ffffff26;
}
.dropdown-menu {
background-color: #7952b3;
}
.dropdown-item:active,
.dropdown-item:focus,
.dropdown-item:hover {
background-color: #ffffff26;
}
.my-container {
transition: 0.4s;
}
/* for navbar */
.active-nav {
margin-left: 0;
}
/* for main section */
.active-cont {
margin-left: 250px;
}
#menu-btn {
background-color: #7952b3;
color: #fff;
}
#menu-btn:focus {
box-shadow: 0 0 0 0.25rem #7952b344;
}
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>
Brand name not aligning to left in Bootstrap 5:
.navbar-nav>li {
padding-bottom: 2px;
font-size: 25px;
display: block;
}
nav {
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .2);
width: 100%;
}
.container {
text-align: center;
padding-top: 35px;
}
nav img {
padding-left: 15px;
opacity: 0.75;
}
#media screen and (max-width:379px) {
nav img {
content: center;
}
}
#media screen and (min-width:1140px) {
.navbar-nav {
padding-right: 26px;
}
}
nav .h3-brand {
color: black;
font-size: 30px;
opacity: 0.75;
box-align: left;
align-items: left !important;
align-items: start;
}
#media screen and (max-width:420px) {
.navbarbutton {
margin: auto;
}
}
#media screen and (min-width:420px),
screen and (max-width:1140px) {}
#media screen and (min-width:421) {
.navbarbutton {
margin: 0px;
margin-right: 30px;
}
}
.navbar-toggler {
opacity: 0.75;
border: none;
}
.navbar-toggler:hover {
opacity: 2;
}
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
outline: none;
box-shadow: none;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Company</title>
<link rel="stylesheet" href="Index.css">
</head>
<body>
<nav class="navbar sticky-top navbar-expand-xl navbar-light bg-light ">
<a href="#" class="navbar-brand">
<img class="rounded" src="assets/company-name.png" alt="Company Logo" />
</a>
<h3 class="h3-brand navbar-brand">Company</h3>
<button class="navbar-toggler style: margin-right:30px; navbarbutton" type="button" data-bs-toggle="collapse" data-bs-target="#toggleMobileMenu" aria-controls="toggleMobileMenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="toggleMobileMenu">
<ul class="row flex-row flex-wrap navbar-nav ms-auto text-center">
<li class="nav-item col-6 col-xl-auto"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item col-6 col-xl-auto"><a class="nav-link" href="#">Über uns</a></li>
<li class="nav-item col-6 col-xl-auto"><a class="nav-link" href="#">FAQ</a>
<li class="nav-item col-6 col-xl-auto"><a class="nav-link" href="#">Preise</a></li>
<li class="nav-item col-6 col-xl-auto"><a class="nav-link" href="#">Kontakt</a></li>
<li class="nav-item col-6 col-xl-auto"><a class="nav-link" href="#">Impressum</a></li>
</ul>
</div>
</nav>
<div class="container">
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
I tried the following rules, but none worked:
text-align: left;
align-content: left;
align-items: left;
float: left;
Change the Compagny tag to span, put a "h3" class on it to keep font-size and put this span IN the link of your brand. It is not in left because it is not in the link tag.
And no need a navbar-brand class on span Company.
<a href="#" class="navbar-brand">
<img class="rounded" src="assets/company-name.png" alt="Company Logo" />
<span class="h3">Company</span>
</a>
I am having an issue where my nav items are not displaying. While not visible, the register and logout nav are 'clickable', and it's invisible but when I hover over it I can click on it and it takes me to register and conversely I can click to logout after I register and am logged in. None of my other nav items are showing up even invisibly for me to click on. There should be register and login nav item displayed for users who haven't logged in, and then a number of nav items after a user logs in.
As you can see in my snippet, when you hover over to the right, there is a link that you can click on, but is invisible. Also as I said, it should be 2 links when user isn't logged in yet.
.navbar-nav li a {
padding-left: 35px;
padding-right: 10px;
margin-top: -20px;
margin-bottom: -20px;
color: yellow;
position: fixed;
width: 100%;
}
/* Modify the backgorund color */
.navbar-custom {
background-color: #ffffff;
border: 2px solid pink
}
.jumbotron {
background-image: url("/static/images/jumbo.jpg");
background-size: cover;
min-height: 350px
}
.notification {
text-decoration: none;
padding: 50;
position: relative;
display: inline-block;
}
.notification .badge {
position: absolute;
top: -15px;
right: -10px;
padding: 5px 5px;
border-radius: 40%;
background-color: red;
color: white;
}
.social a {
font-size: 4.5em;
padding: 3rem;
}
.fa-facebook {
color: #3b5998;
}
.fa-twitter {
color: #00aced;
}
.fa-goggle-plus-g {
color: #dd4b39;
}
.fa-instagram {
color: #517fa4;
}
.fa-youtube {
color: #bb0000;
}
.fa-facebook:hover,
.fa-twitter:hover,
.fa-instagram:hover,
.fa-instagram:hover,
.fa-youtube:hover {
color: #d5d5d5;
}
footer {
padding-top: 3.5rem;
color: blue;
background-color: #ffffff
}
hr.light {
border-top: 1px solid red;
width: 75%;
margin-top: .8rem;
margin-bottom: 1rem;
}
hr.light-100 {
border-top: 1px solid #;
width: 100%;
margin-top: .8rem;
margin-bottom: 1rem;
}
body {
margin: 0px;
padding: 0px;
background-color: #FFFFFF;
font-family: arial;
box-sizing: border-box;
}
.card-container {
width: 300px;
height: 430px;
background: #FFF;
border-radius: 6px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0px 1px 10px 1px #000;
overflow: hidden;
display: inline-block;
}
.upper-container {
height: 150px;
background: #7F00FF;
}
.image-container {
background: white;
width: 80px;
height: 80px;
border-radius: 50%;
padding: 5px;
transform: translate(100px, 100px);
}
.image-container img {
width: 80px;
height: 80px;
border-radius: 50%;
}
.lower-container {
height: 280px;
background: #FFF;
padding: 20px;
padding-top: 40px;
text-align: center;
}
.lower-container h3,
h4 {
box-sizing: border-box;
line-height: .6;
font-weight: lighter;
}
.lower-container h4 {
color: #7F00FF;
opacity: .6;
font-weight: bold;
}
.lower-container p {
font-size: 16px;
color: gray;
margin-bottom: 30px;
}
.lower-container .btn {
padding: 12px 20px;
background: #7F00FF;
border: none;
color: white;
border-radius: 30px;
font-size: 12px;
text-decoration: none;
font-weight: bold;
transition: all .3s ease-in;
}
.lower-container .btn:hover {
background: transparent;
color: #7F00FF;
border: 2px solid #7F00FF;
}
<html lang="en">
<head>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<link rel="stylesheet" href="{% static 'css/style.css' %}" />
<link rel="stylesheet" href="{% static 'css/notification.css' %}" type="text/css" class="notification" />
<style>
<!-- Add this tag --> {
% block styles %
}
{
% endblock %
}
</style>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-custom navbar-expand-md">
<div class="container-fluid">
<a class='navbar-brand' href="{% url 'dating_app:home' %}"><img src="{% static 'images/cupids_corner_logo.jpg' %}">
<h5 style="color:red"></h5>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse">
<ul class="navbar-nav ml-auto">
{% if user.is_authenticated %} {% unread_messages request.user as user_unread_messages %} {% if user_unread_messages > 0 %}
<li class="nav-item">
<a class="notification" style="color:brown" href="{% url 'dating_app:conversations' user.id %}" type="text/css">
<span>Inbox</span>
<span class="badge">{% unread_messages request.user %}</span>
</a>
</li>
{% else %}
<li class="nav-item">
<a style="color:brown" href="{% url 'dating_app:conversations' user.id %}">
<span>Inbox</span>
</a>
</li>
{% endif %}
<li class="nav-item">
<a style="color:brown" href="{% url 'dating_app:view_matches' user.id %}">Matches</a>
</li>
<li class="nav-item">
<a style="color:brown" href="{% url 'dating_app:mingle' %}">Mingle</a>
</li>
<li class="nav-item">
<a style="color:brown" href="{% url 'dating_app:profile' user.id %}">My Profile</a>
</li>
<li class="nav-item">
<a style="color:brown" href="{% url 'dating_app:logout' %}">log out</a>
</li>
{% else %}
<li class="nav-item">
<a style="color:brown" href="{% url 'dating_app:login' %}">login</a>
</li>
<li class="nav-item">
<a style="color:brown" href="{% url 'dating_app:register' %}">register</a>
</li>
{% endif %}
</ul>
</div>
</div>
</nav>
<!-- HEADER END -->
<!--Below is individual page will html will be rendered -->
<hr class="my-4">
<!--Connect -->
<div class="container-fluid padding">
<div class="row text-center padding">
<div class="col-12">
<h2>Connect</h2>
</div>
<div class="col-12 social padding">
<i class="fab fa-facebook"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
<i class="fab fa-google-plus-g"></i>
<i class="fab fa-youtube"></i>
</div>
</div>
</div>
<!-- FOOTER AREA BEGINS BELOW-->
<footer>
<div class="container-fluid padding">
<div class="row text-center">
<div class="col-md-4">
<img src="{% static 'images/cupids_corner_logo.jpg' %}">
<hr class="light">
<p>703-309-9572</p>
<p>rezazandirz#gmail.com</p>
<p>100 Street Name</p>
<p>City, State, 000</p>
</div>
<div class="col-md-4">
<hr class="light">
<h5>Our hours</h5>
<hr class="light">
<p>Monday: 9am-5pm</p>
<p>Saturday: 10am-4pm</p>
<p>Sunday: closed(like Chick-fil-A)</p>
</div>
<div class="col-md-4">
<hr class="light">
<h5>Our satellite offices</h5>
<hr class="light">
<p>City, State, 00000</p>
<p>City, State, 00000</p>
<p>City, State, 00000</p>
</div>
<div class="col-12">
<hr class="light-100">
<h5>©CupidsCorner.com</h5>
</div>
</footer>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../../assets/js/vendor/popper.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
</body>
</html>
You did 2 mistakes -
You did not set the background color for the hamburger.
You did not set id in here <div class="collapse navbar-collapse" id="????" >
Code below-
<html lang="en">
<head>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
<link rel="stylesheet" href="{% static 'css/style.css' %}"/>
<link rel="stylesheet" href="{% static 'css/notification.css' %}" type="text/css" class = "notification"/>
<style>
<!-- Add this tag -->
{% block styles %}
{% endblock %}
.navbar-nav li a{
padding-left:35px;
padding-right:10px;
margin-top: -20px;
margin-bottom: -20px;
color:yellow;
position: fixed;
width: 100%;
}
/* Modify the backgorund color */
.navbar-custom {
background-color: #ffffff;
border: 2px solid pink
}
.jumbotron{
background-image: url("/static/images/jumbo.jpg");
background-size: cover;
min-height: 350px
}
.notification {
text-decoration: none;
padding:50;
position: relative;
display: inline-block;
}
.notification .badge {
position: absolute;
top: -15px;
right: -10px;
padding: 5px 5px;
border-radius: 40%;
background-color: red;
color: white;
}
.social a{
font-size: 4.5em;
padding: 3rem;
}
.fa-facebook{
color: #3b5998;
}
.fa-twitter{
color:#00aced;
}
.fa-goggle-plus-g{
color:#dd4b39;
}
.fa-instagram{
color:#517fa4;
}
.fa-youtube{
color:#bb0000;
}
.fa-facebook:hover,
.fa-twitter:hover,
.fa-instagram:hover,
.fa-instagram:hover,
.fa-youtube:hover{
color: #d5d5d5;
}
footer {
padding-top:3.5rem;
color:blue;
background-color: #ffffff
}
hr.light{
border-top:1px solid red;
width:75%;
margin-top: .8rem;
margin-bottom:1rem;
}
hr.light-100{
border-top:1px solid #;
width:100%;
margin-top: .8rem;
margin-bottom:1rem;
}
body{
margin: 0px;
padding: 0px;
background-color: #FFFFFF;
font-family: arial;
box-sizing: border-box;
}
.card-container{
width: 300px;
height: 430px;
background: #FFF;
border-radius: 6px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
box-shadow: 0px 1px 10px 1px #000;
overflow: hidden;
display: inline-block;
}
.upper-container{
height: 150px;
background: #7F00FF;
}
.image-container{
background: white;
width: 80px;
height: 80px;
border-radius: 50%;
padding: 5px;
transform: translate(100px,100px);
}
.image-container img{
width: 80px;
height: 80px;
border-radius: 50%;
}
.lower-container{
height: 280px;
background: #FFF;
padding: 20px;
padding-top: 40px;
text-align: center;
}
.lower-container h3, h4{
box-sizing: border-box;
line-height: .6;
font-weight: lighter;
}
.lower-container h4{
color: #7F00FF;
opacity: .6;
font-weight: bold;
}
.lower-container p{
font-size: 16px;
color: gray;
margin-bottom: 30px;
}
.lower-container .btn{
padding: 12px 20px;
background: #7F00FF;
border: none;
color: white;
border-radius: 30px;
font-size: 12px;
text-decoration: none;
font-weight: bold;
transition: all .3s ease-in;
}
.lower-container .btn:hover{
background: transparent;
color: #7F00FF;
border: 2px solid #7F00FF;
}
</style>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-custom navbar-expand-md navbar-light bg-light">
<div class="container-fluid">
<a class= 'navbar-brand' href="{% url 'dating_app:home' %}"><img src="{% static 'images/cupids_corner_logo.jpg' %}"><h5 style="color:red"></h5> </a>
<button class= "navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarResponsive">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive" >
<ul class ="navbar-nav ml-auto" >
{% if user.is_authenticated %}
{% unread_messages request.user as user_unread_messages %}
{% if user_unread_messages > 0 %}
<li class="nav-item" >
<a class= "notification" style="color:brown" href="{% url 'dating_app:conversations' user.id %}" type="text/css" >
<span>Inbox</span>
<span class="badge">{% unread_messages request.user %}</span>
</a>
</li>
{% else %}
<li class="nav-item">
<a style="color:brown" href="{% url 'dating_app:conversations' user.id %}">
<span>Inbox</span>
</a>
</li>
{% endif %}
<li class="nav-item">
<a style="color:brown" href="{% url 'dating_app:view_matches' user.id %}">Matches</a>
</li>
<li class="nav-item">
<a style="color:brown" href="{% url 'dating_app:mingle' %}">Mingle</a>
</li>
<li class="nav-item">
<a style="color:brown" href="{% url 'dating_app:profile' user.id %}">My Profile</a>
</li>
<li class="nav-item">
<a style="color:brown" href="{% url 'dating_app:logout' %}">log out</a>
</li>
{% else %}
<li class="nav-item">
<a style="color:brown" href="{% url 'dating_app:login' %}">login</a>
</li>
<li class="nav-item">
<a style="color:brown" href="{% url 'dating_app:register' %}">register</a>
</li>
{% endif %}
</ul>
</div>
</div>
</nav>
<!-- HEADER END -->
<!--Below is individual page will html will be rendered -->
<hr class="my-4">
<!--Connect -->
<div class="container-fluid padding">
<div class="row text-center padding">
<div class="col-12">
<h2>Connect</h2>
</div>
<div class="col-12 social padding">
<i class="fab fa-facebook"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
<i class="fab fa-google-plus-g"></i>
<i class="fab fa-youtube"></i>
</div>
</div>
</div>
<!-- FOOTER AREA BEGINS BELOW-->
<footer>
<div class="container-fluid padding">
<div class="row text-center">
<div class="col-md-4">
<img src="{% static 'images/cupids_corner_logo.jpg' %}">
<hr class="light">
<p>703-309-9572</p>
<p>rezazandirz#gmail.com</p>
<p>100 Street Name</p>
<p>City, State, 000</p>
</div>
<div class="col-md-4">
<hr class="light">
<h5>Our hours</h5>
<hr class="light">
<p>Monday: 9am-5pm</p>
<p>Saturday: 10am-4pm</p>
<p>Sunday: closed(like Chick-fil-A)</p>
</div>
<div class="col-md-4">
<hr class="light">
<h5>Our satellite offices</h5>
<hr class="light">
<p>City, State, 00000</p>
<p>City, State, 00000</p>
<p>City, State, 00000</p>
</div>
<div class="col-12">
<hr class="light-100">
<h5>©CupidsCorner.com</h5>
</div>
</footer>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../../assets/js/vendor/popper.min.js"></script>
<script src="../../dist/js/bootstrap.min.js"></script>
</body>
</html>
Below is my code for my portfolio site. The sticky top is not working for the full page. Please help.
It is only working for the header but not working for other divs. I don't know where I am doing wrong. I have also tried making it fixed, but it is not helping.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header {
background: url("image5.jpg") no-repeat;
height: 100vh;
width: 100%;
margin-top: auto;
background-size: cover;
background-position: center;
}
.navbar {
width: 100%;
top: 0;
}
.navbar-dark .navbar-toggler {
border: none;
color: white;
border: 2px solid white;
border-radius: 2px;
outline: none;
}
.navbar-nav .nav-item {
text-align: center;
margin-left: 10px;
margin-right: 5px;
padding-right: 20px;
padding-left: 20px;
}
.navbar-nav .nav-item.active .nav-link {
background: blanchedalmond;
color: black !important;
}
.navbar-nav .nav-item .nav-link:hover {
background: blanchedalmond;
color: black !important;
}
.nav-link {
text-transform: uppercase;
color: aliceblue !important;
}
.main h1 {
margin-top: 200px;
margin-left: 40px;
padding: 10px;
text-shadow: 3px 3px #ff0000;
color: whitesmoke;
}
.main p {
margin-left: 40px;
color: white;
}
.education {
background-color: black;
height: 100vh;
width: 100%;
}
.education .eduarea {
width: 90%;
height: 80vh;
top: 5%;
margin: 0 auto;
position: relative;
background-color: white;
border: solid 2px red;
border-top-right-radius: 80px;
border-bottom-left-radius: 80px;
}
.education h1 {
color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="Description" content="Enter your description here" />
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<link rel="stylesheet" href="style.css">
<title>Title</title>
</head>
<body>
<div class="mx-auto">
<header>
<div class="header">
<nav class="navbar navbar-expand-lg navbar-dark sticky-top">
<a class="navbar-brand" href="#"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">About Me <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#1">Education</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Training</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Experience</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Skills</a>
</li>
</ul>
</div>
</nav>
<div class="main">
<div class="container-fluid">
<h1> I am Subhadeepta Sahoo</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br/> Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,<br/> when an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of</p>
</div>
</div>
</div>
</header>
<div class="education" id="2">
<div class="container-fluid">
<h1>Education</h1>
</div>
<div class="container-fluid eduarea">
<h4> Heading 1</h4>
<p> M.Tech</p>
<h4> Heading 2</h4>
<p>B.Tech</p>
</div>
</div>
</div>
<script src="file.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
</body>
</html>
I haven't used any javascript here. If it is necessary to use, then please let me know how to use it.
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