I want to put the Logo separeted of the Country Image, with no background(transparent) between them, so you can see the top of the real background.
Like this:How it is right not//////How i want it
As you can see in the first image it's the full navbar with the full red background and I would like to separate the logo of the country leaving the transparent space in the middle but that they keep the red background
#import url('https://fonts.googleapis.com/css?family=Lato:400,700');
html, body {margin: 0; height: 100%; overflow: hidden}
*{
margin: 0px 0px;
color: white;
}
body {
overflow-x: hidden;
font-family: 'Lato', sans-serif;
color: white;
}
body{
margin: ;
padding: ;
font-family:'Lato', sans-serif;
}
body {
background: url(negocio.jpg) no-repeat center center fixed;
margin-top: 300px;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size: cover;
}
/*--------Navbar---------*/
.navbar{
text-transform: uppercase;
font-weight: 700;
font-size: 1.1rem;
letter-spacing: .1rem;
margin: 0 10px;
border-radius: 15px;
-webkit-box-shadow: 4px 10px 37px 8px rgba(0,0,0,0.42);
-moz-box-shadow: 4px 10px 37px 8px rgba(0,0,0,0.42);
box-shadow: 4px 10px 37px 8px rgba(0,0,0,0.42);
background-image: linear-gradient(to right, rgba(177,17,30,1) 0%, rgba(177,17,30,1) 100%);
}
.navbar-nav li{
padding-right: .7rem;
}
.dropdown:hover > .dropdown-menu {
display: block;
}
.dropdown > .dropdown-toggle:active {
/*Without this, clicking will make it sticky*/
pointer-events: none;
}
/*--------Font Color------------------*/
.navbar-dark .navbar-nav .nav-link{
color: white;
padding-top: .8rem;
}
/*Orange color when Mouse on it*/
.navbar-dark .navbar-nav .nav-link:hover{
color: #fbef7c ;
}
/*------------------END navbar-------------------------*/
<body data-spy="scroll" data-target="#navbarResponsive">
<!--start Home Section-->
<div class="home">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-danger fixed-top">
<a class="navbar-brand" href="#"><img id="colombia" src="img/logo.png" width="50px" height="50px" alt=""></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">
<div class="dropdown-divider"></div>
<li class="nav-item dropdown">
<a class="nav-link dropwdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">KS Colombia |<img src="https://www.lifeder.com/wp-content/uploads/2017/04/bandera-colombia.jpg" width="50px" height="50px"></a>
</ul>
</div>
</nav>
</div>
Related
I'm using fixed-top on nav it makes it on top of the header as shown on image.
Problem is, that when I scroll down, the menu goes down.
Is there any way (sure there is) how to make nav look the same but not follow when scroll?
I mean without fixed-top on nav.
Pictures
Here are codes:
* {
padding: 0;
margin: 0;
}
body {
background-color: #fff;
}
nav.navbar {
transition: top 0.3s;
}
nav.navbar.navbar-light .navbar-nav {
padding: 1.5rem 0;
}
nav.navbar.navbar-light .navbar-nav .nav-item {
text-transform: uppercase;
font-weight: 700;
}
nav.navbar.navbar-light .navbar-nav .nav-item .nav-link {
padding-left: 1.5rem;
color: #fff;
}
nav.navbar.navbar-light .navbar-nav .nav-item .nav-link:hover {
color: #FE5000;
}
nav.navbar.navbar-light .navbar-nav .nav-item.active .nav-link {
color: #FE5000;
}
header.masthead {
padding-top: 10.5rem;
padding-bottom: 6rem;
text-align: center;
color: #fff;
background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url("https://www.patrikderka.cz/stavby-seibert/assets/img/home-bg.jpg");
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center center;
background-size: cover;
}
header.masthead .btn {
background-color: #FE5000 !important;
border: #FE5000 !important;
padding: 1.25rem 2.5rem;
}
header.masthead .btn a {
color: #fff;
text-decoration: none;
}
header.masthead .masthead-subheading {
font-size: 1.5rem;
font-style: italic;
line-height: 1.5rem;
margin-bottom: 25px;
}
header.masthead .masthead-heading {
font-size: 3.25rem;
font-weight: 700;
line-height: 3.25rem;
margin-bottom: 2rem;
}
#media (min-width: 768px) {
header.masthead {
padding-top: 17rem;
padding-bottom: 12.5rem;
}
header.masthead .masthead-subheading {
font-size: 2.25rem;
font-style: italic;
line-height: 2.25rem;
margin-bottom: 2rem;
}
header.masthead .masthead-heading {
font-size: 4.5rem;
font-weight: 700;
line-height: 4.5rem;
margin-bottom: 4rem;
}
}
<script src="https://kit.fontawesome.com/e5f67cf6ac.js" crossorigin="anonymous"></script>
<script src="reveal.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
<nav class="navbar navbar-expand-lg navbar-light fixed-top">
<div class="container">
<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>
<div class="collapse navbar-collapse justify-content-center" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="/">Domu</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/reference/">O nás</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/cenik">Služby</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/cenik">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/kontakt">Kontakt</a>
</li>
</ul>
</div>
</div>
</nav>
<header class="masthead">
<div class="container">
<div class="masthead-subheading">My jsme stavaři.</div>
<div class="masthead-heading">PTS-STAVBY Seibert</div>
<a class="btn btn-primary btn-lg text-uppercase" href="#services">Zjistit více</a>
</div>
</header>
<section id="onas" class="py-5">
<div class="container">
<div class="title">
<h2>
O nás
</h2>
<p>
Kdo jsme a co děláme?
</p>
</div>
</div>
<div class="container">
<div class="row mb-5">
<div class="col-12 col-md-6 my-auto">
<p>
Stavební firma PTS-STAVBY SEIBERT byla založena v dubnu roku 2006. Zpočátku se firma zaměřuje na rekonstrukce objektů.
</p>
<p>
Postupem času začíná převládat klasická stavební činnost od základní desky včetně projektů.
</p>
<p>
V letech 2010-2020 firma realizuje řadu výstaveb v obcí našeho regionu a to převážně rekonstrukce stávajících objektů.
</p>
<p>
V roce 2020 firma rozšiřuje svoji činnost o speciální stavební práce (brušení podlach jansen,příprava podkladu pro velkoobchody s krytinamy všeho druhu.atd).
</p>
</div>
<div class="col-12 col-md-6">
<img title="Stavitelství" alt="Stavitelství" class="img-fluid" src="https://www.patrikderka.cz/stavby-seibert/assets/img/mixfotek.jpg" />
</div>
</div>
</section>
I tried to put the nav into header.
It sounds like you don't want fixed-top at all. Something like position: absolute;, so that the nav doesn't take up space and moves as the page does.
I've added the following:
.myNav {
position: absolute !important;
width: 100%;
}
Note: I added !important because _Navbar.scss comes in after, if you want to bump the custom CSS up the order, you need to increase the CSS Specificity (with an id or more classes, etc...)
* {
padding: 0;
margin: 0;
}
body {
background-color: #fff;
}
nav.navbar {
transition: top 0.3s;
}
nav.navbar.navbar-light .navbar-nav {
padding: 1.5rem 0;
}
nav.navbar.navbar-light .navbar-nav .nav-item {
text-transform: uppercase;
font-weight: 700;
}
nav.navbar.navbar-light .navbar-nav .nav-item .nav-link {
padding-left: 1.5rem;
color: #fff;
}
nav.navbar.navbar-light .navbar-nav .nav-item .nav-link:hover {
color: #FE5000;
}
nav.navbar.navbar-light .navbar-nav .nav-item.active .nav-link {
color: #FE5000;
}
header.masthead {
padding-top: 10.5rem;
padding-bottom: 6rem;
text-align: center;
color: #fff;
background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url("https://www.patrikderka.cz/stavby-seibert/assets/img/home-bg.jpg");
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center center;
background-size: cover;
}
header.masthead .btn {
background-color: #FE5000 !important;
border: #FE5000 !important;
padding: 1.25rem 2.5rem;
}
header.masthead .btn a {
color: #fff;
text-decoration: none;
}
header.masthead .masthead-subheading {
font-size: 1.5rem;
font-style: italic;
line-height: 1.5rem;
margin-bottom: 25px;
}
header.masthead .masthead-heading {
font-size: 3.25rem;
font-weight: 700;
line-height: 3.25rem;
margin-bottom: 2rem;
}
#media (min-width: 768px) {
header.masthead {
padding-top: 17rem;
padding-bottom: 12.5rem;
}
header.masthead .masthead-subheading {
font-size: 2.25rem;
font-style: italic;
line-height: 2.25rem;
margin-bottom: 2rem;
}
header.masthead .masthead-heading {
font-size: 4.5rem;
font-weight: 700;
line-height: 4.5rem;
margin-bottom: 4rem;
}
}
.myNav {
position: absolute !important;
width: 100%;
}
<script src="https://kit.fontawesome.com/e5f67cf6ac.js" crossorigin="anonymous"></script>
<script src="reveal.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
<nav class="navbar navbar-expand-lg navbar-light myNav">
<div class="container">
<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>
<div class="collapse navbar-collapse justify-content-center" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="/">Domu</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/reference/">O nás</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/cenik">Služby</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/cenik">Portfolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/kontakt">Kontakt</a>
</li>
</ul>
</div>
</div>
</nav>
<header class="masthead">
<div class="container">
<div class="masthead-subheading">My jsme stavaři.</div>
<div class="masthead-heading">PTS-STAVBY Seibert</div>
<a class="btn btn-primary btn-lg text-uppercase" href="#services">Zjistit více</a>
</div>
</header>
<section id="onas" class="py-5">
<div class="container">
<div class="title">
<h2>
O nás
</h2>
<p>
Kdo jsme a co děláme?
</p>
</div>
</div>
<div class="container">
<div class="row mb-5">
<div class="col-12 col-md-6 my-auto">
<p>
Stavební firma PTS-STAVBY SEIBERT byla založena v dubnu roku 2006. Zpočátku se firma zaměřuje na rekonstrukce objektů.
</p>
<p>
Postupem času začíná převládat klasická stavební činnost od základní desky včetně projektů.
</p>
<p>
V letech 2010-2020 firma realizuje řadu výstaveb v obcí našeho regionu a to převážně rekonstrukce stávajících objektů.
</p>
<p>
V roce 2020 firma rozšiřuje svoji činnost o speciální stavební práce (brušení podlach jansen,příprava podkladu pro velkoobchody s krytinamy všeho druhu.atd).
</p>
</div>
<div class="col-12 col-md-6">
<img title="Stavitelství" alt="Stavitelství" class="img-fluid" src="https://www.patrikderka.cz/stavby-seibert/assets/img/mixfotek.jpg" />
</div>
</div>
</section>
Note: Due to media queries, you may need to run the snippet in fullscreen to see the effect.
Just change your CSS position to Absolute instead of Fixed.
.fixed-top {
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 1030;
I created a card which i would like it to translate along the y-axis and throw a shadow upon hover. The translation along the y-axis is working well but the shadow doesn't get thrown when i hover over the card. I wrote the following css rule and i don't know if i got it right, because it clearly is NOT working on everything i applied it on:
:root {
--brand: #b33030;
--body: #606060;
--dark: #19282f;
--border-radius: 4px;
--shadow: 0px 4px 60px rgba(0, 0, 0, 0.14);
}
/* reset & helpers */
body {
font-family: "Source Sans Pro", sans-serif;
line-height: 1.7;
color: var(--body);
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 700;
color: var(--dark);
font-family: "Domine", sans-serif;
}
a {
color: var(--dark);
text-decoration: none;
transition: all 0.4s linear;
}
a:hover {
color: var(--brand);
}
a.custom-link {
text-transform: uppercase;
font-weight: 700;
font-size: 14px;
}
img {
width: 100%;
}
section {
padding-top: 100px;
padding-bottom: 100px;
}
.section-intro {
margin-bottom: 33px;
text-align: center;
}
.section-intro p {
margin: auto;
max-width: 500px;
}
.custom-card {
transition: all 0.4s ease;
background-color: white;
border-radius: var(--border-radius);
}
.custom-card:hover {
box-shadow: var(--shadow);
transform: translateY(-5px);
}
/* Hero */
#hero {
min-height: 100vh;
background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(../../../assets/images/hero_bg_img.jpg);
background-size: cover;
background-position: center;
text-align: center;
display: flex;
align-items: center;
background-attachment: fixed;
}
#hero h1 {
font-weight: 700;
}
#hero h1,
#hero p {
color: white;
}
#hero p {
max-width: 500px;
margin: 12px auto 24px auto;
}
#hero button {
padding: 12px 28px;
background-color: rgba(255, 255, 255, 0.3);
border: none;
color: white;
width: 40%;
}
#hero button:focus {
box-shadow: 1px;
}
/* button */
.btn {
padding: 12px 28px;
font-size: 16px;
text-transform: uppercase;
border-radius: var(--border-radius);
font-weight: 700;
border-radius: var(--border-radius);
transition: all 0.4s ease;
}
.btn:hover {
transform: translateY(-3px);
}
.btn-brand {
background-color: var(--brand);
color: white;
}
.btn-brand:hover {
color: white;
}
/* Navbar */
.navbar.bg-white {
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.navbar .navbar-nav .nav-link {
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
}
.navbar .navbar-nav .nav-link:hover .navbar .navbar-nav .nav-link.active {
color: var(--brand);
}
/* Features */
.features {
padding: 44px 24px;
text-align: center;
}
.icon-box {
width: 80px;
height: 80px;
background-color: var(--brand);
color: white;
border-radius: var(--border-radius);
font-size: 34px;
display: flex;
align-items: center;
justify-content: center;
margin: auto;
}
.features h5 {
margin-top: 28px;
margin-bottom: 12px;
}
.features p {
font-size: 14px;
}
<!-- NAV -->
<nav class="navbar navbar-expand-lg navbar-light bg-white sticky-top">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 ms-auto">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#testimonials">Testimonials</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#login">Login</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- END OF NAV-->
<!-- HERO -->
<section id="hero">
<div class="container">
<div class="row">
<div class="col-12">
<h1 class="display-3">Brighter Brain</h1>
<p>
Creating a pathway to make access to education easier, flexible and profound.
</p>
</div>
</div>
<div class="row">
<p>
<button class="btn btn-brand" type="button" id="button">
Get started.
</button>
</p>
</div>
</div>
</section>
<!-- END OF HERO-->
<!-- FEATURES -->
<section id="features">
<div class="container">
<div class="row">
<div class="col-12 section-intro">
<h1>Our Features</h1>
<p>
We have a very significant number of features which will help make educational life easily.
</p>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-6">
<div class="features custom-card">
<div class="icon-box">
<i class="ri-live-fill"></i>
</div>
<h5>Features Title</h5>
<p>
Integrated administrative design and monitoring of teaching manuals, digital class and examinations deployable anywhere and anytime.
</p>
Read more
</div>
</div>
</div>
</div>
</section>
<!-- END OF FEATURES -->
The root rule in the CSS is suppose to handle all color applications, hovers et al BUT it is not working. Am i doing this right?
Thanks in advance.
I just threw your code into a runnable snippet and the shadow on hover seems to be working for me.
I darkened it to 0.5 opacity so it's more obvious.
:root {
--brand: #b33030;
--body: #606060;
--dark: #19282f;
--border-radius: 4px;
--shadow: 0px 4px 60px rgba(0, 0, 0, 0.5);
}
/* reset & helpers */
body {
font-family: "Source Sans Pro", sans-serif;
line-height: 1.7;
color: var(--body);
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 700;
color: var(--dark);
font-family: "Domine", sans-serif;
}
a {
color: var(--dark);
text-decoration: none;
transition: all 0.4s linear;
}
a:hover {
color: var(--brand);
}
a.custom-link {
text-transform: uppercase;
font-weight: 700;
font-size: 14px;
}
img {
width: 100%;
}
section {
padding-top: 100px;
padding-bottom: 100px;
}
.section-intro {
margin-bottom: 33px;
text-align: center;
}
.section-intro p {
margin: auto;
max-width: 500px;
}
.custom-card {
transition: all 0.4s ease;
background-color: white;
border-radius: var(--border-radius);
}
.custom-card:hover {
box-shadow: var(--shadow);
transform: translateY(-5px);
}
/* Hero */
#hero {
min-height: 100vh;
background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)),
url(../../../assets/images/hero_bg_img.jpg);
background-size: cover;
background-position: center;
text-align: center;
display: flex;
align-items: center;
background-attachment: fixed;
}
#hero h1 {
font-weight: 700;
}
#hero h1,
#hero p {
color: white;
}
#hero p {
max-width: 500px;
margin: 12px auto 24px auto;
}
#hero button {
padding: 12px 28px;
background-color: rgba(255, 255, 255, 0.3);
border: none;
color: white;
width: 40%;
}
#hero button:focus {
box-shadow: 1px;
}
/* button */
.btn {
padding: 12px 28px;
font-size: 16px;
text-transform: uppercase;
border-radius: var(--border-radius);
font-weight: 700;
border-radius: var(--border-radius);
transition: all 0.4s ease;
}
.btn:hover {
transform: translateY(-3px);
}
.btn-brand {
background-color: var(--brand);
color: white;
}
.btn-brand:hover {
color: white;
}
/* Navbar */
.navbar.bg-white {
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.navbar .navbar-nav .nav-link {
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
}
.navbar .navbar-nav .nav-link:hover .navbar .navbar-nav .nav-link.active {
color: var(--brand);
}
/* Features */
.features {
padding: 44px 24px;
text-align: center;
}
.icon-box {
width: 80px;
height: 80px;
background-color: var(--brand);
color: white;
border-radius: var(--border-radius);
font-size: 34px;
display: flex;
align-items: center;
justify-content: center;
margin: auto;
}
.features h5 {
margin-top: 28px;
margin-bottom: 12px;
}
.features p {
font-size: 14px;
}
<!-- NAV -->
<nav class="navbar navbar-expand-lg navbar-light bg-white sticky-top">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-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 ms-auto">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#testimonials">Testimonials</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#login">Login</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- END OF NAV-->
<!-- HERO -->
<section id="hero">
<div class="container">
<div class="row">
<div class="col-12">
<h1 class="display-3">Brighter Brain</h1>
<p>
Creating a pathway to make access to education easier, flexible and
profound.
</p>
</div>
</div>
<div class="row">
<p>
<button class="btn btn-brand" type="button" id="button">
Get started.
</button>
</p>
</div>
</div>
</section>
<!-- END OF HERO-->
<!-- FEATURES -->
<section id="features">
<div class="container">
<div class="row">
<div class="col-12 section-intro">
<h1>Our Features</h1>
<p>
We have a very significant number of features which will help make
educational life easily.
</p>
</div>
</div>
<div class="row">
<div class="col-lg-4 col-md-6">
<div class="features custom-card">
<div class="icon-box">
<i class="ri-live-fill"></i>
</div>
<h5>Features Title</h5>
<p>
Integrated administrative design and monitoring of teaching manuals,
digital class and examinations deployable anywhere and anytime.
</p>
Read more
</div>
</div>
</div>
</div>
</section>
<!-- END OF FEATURES -->
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>
So what I'm trying to do is make my image fit on the page without having a scroll. It's obvious that the jumbotron and nav are pushing the image down, so what makes sense to me, is to put the image behind the jumbotron and nav. I tried an overflow of hidden, and that didn't seem to work. I also tried putting everything inside my wrapper, that worked, but then my responsive design got all messed up. This is the picture here that would cover the page: [https://static.pexels.com/photos/7106/macbook-computer-clean-hero.jpg][1].
Here is my code:
html, body {
margin: 0;
padding: 0;
display: table;
width: 100%;
height: 100%;
}
.jumbotron {
background-color: rgba(51, 51, 51, 1);
padding-bottom: 0;
margin-top: -20px;
margin-bottom: 0;
padding-top: 20px;
h1 {
font-size: 5em;
text-transform: uppercase;
font-weight: 100;
color: #fff;
margin: .2em 0 0 .2em;
letter-spacing: .2em;
span {
font-weight: normal;
}
}
p {
color: #fff;
margin-right: .5em;
margin-bottom: 0;
}
#slogan {
font-size: 1.2em;
margin: 0;
margin-right: 20px;
}
}
.navbar {
background-color: rgba(51, 51, 51, 1);
border-radius: 0;
margin-top: 0;
margin-bottom: 0;
min-height: 0;
border: none;
li a {
outline: none;
text-transform: uppercase;
padding: 5px 15px 10px 15px;
font-size: .9em;
}
}
.wrapper{ // The wrapper is ONLY on the index.html page.
// position: relative;
display: table;
width: 100%;
height: 100%;
text-align: center;
color: #FFF;
background-image: url("https://static.pexels.com/photos/7106/macbook-computer-clean-hero.jpg");
background-position: center center;
background-size: cover;
}
.h2_slogan {
font-weight: 100;
font-size: 3em;
text-transform: uppercase;
margin-top: 1em;
}
<header class="jumbotron">
<h1>John <span>Smith</span></h1>
<p class="text-right" id="slogan">Accessible. Affordable. Dependable.</p>
</header>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav text-center">
<li>Home</li>
<li>About</li>
<li>Skills</li>
<li>Portfolio</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<div class="wrapper">
<h2 class="text-center h2_slogan">Web Developer & Designer</h2>
</div>
You can just add it to your body this will put it behind both the jumbotron and the navbar.
What you do:
Change this in your HTML
From:
<body>
To:
<body id="homepage">
Add this to your CSS:
body {
background-image: url("../img/header.jpg");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
And that's basically it.
JsFiddle
Hope this helps!