Twitter Bootstrap Question posted in

Bootstrap 4.3 Make Navbar Static at Top of the Page AND Transparent-Twitter bootstrap

I have done my best checking and googling everywhere for info before asking here… Hopefully I am not redundant.

I am trying to make a static navbar at the top of my page in Bootstrap 4.3.
However, no matter how hard I try, it does not seem to be working:

– I have tried some of the former .static-top / .navbar-static-top classes and other similar workarounds ;
– I have also tried installing plugins (which I have now removed, due to ineffectiveness) – though this mostly “hides” the navbar, instead of leaving it static at the very top of the page.
– I have tried modifying, to no avail, my CSS with “top: 0;” and other formatting tags on the concerned elements.

I have cleaned my code again, to avoid making a big mess of things not working together. (my previous Bootstrap attempt finished in unusable code, hence me trying to be and stay clean, and remove unused / unnecessary code)

Feeling quite lost. Not a “super coder”, mostly graphic designer with plenty of logic understanding. And desperate to have some kind of default functionality to make my navbar static.

The catch is my navbar has to remain transparent (this isn’t always the case when working with some classes)

Here is my code.

/* 0. HTML Defaults
-----------------------------------------------------------------------------------------------------------------------------*/
:root {

	--da-pink: lightpink;
	--da-grey: rgba(5,5,5,1);
	--da-grey: #454545;
	--da-grey-grad: linear-gradient(to bottom right, #131313, #454545);
	--da-grey-opac: rgba(69, 69, 69, .8);
	--da-grey-opac: rgb(69, 69, 69);

}

html, body {
	background-color: black; 
    background: rgba(65,65,65,1);
    background: -moz-linear-gradient(-45deg, rgba(65,65,65,1) 0%, rgba(5,5,5,1) 100%);
    background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(65,65,65,1)), color-stop(100%, rgba(5,5,5,1)));
    background: -webkit-linear-gradient(-45deg, rgba(65,65,65,1) 0%, rgba(5,5,5,1) 100%);
    background: -o-linear-gradient(-45deg, rgba(65,65,65,1) 0%, rgba(5,5,5,1) 100%);
    background: -ms-linear-gradient(-45deg, rgba(65,65,65,1) 0%, rgba(5,5,5,1) 100%);
    background: linear-gradient(135deg, rgba(65,65,65,1) 0%, rgba(5,5,5,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#414141', endColorstr='#050505', GradientType=1 );
	background-repeat: no-repeat;
	background-attachment: fixed;
	margin: 0;
	height: 100%;
	overflow: auto;
	z-index: 10;
}

html body * {

}


h1 {
	font-family: century-gothic, sans-serif; 
	font-weight: 700;
	font-style: normal;
	color: lightpink;
	font-size: 3vw;
	line-height: 4vw;
}

h2 {}
h3 {}
h4 {}
h5 {}
h6 {}


p {    
	font-family: itc-american-typewriter, serif;
    font-weight: 300;
    font-style: normal;
    font-size: 12.5pt;
    color: #ffffff;
    text-align: justify;
    text-decoration: none;
/*  text-indent: 50px; */
/*  word-spacing: 5px */
/*  white-space: pre; */
    letter-spacing: 1px;
/*  line-height: 1.3; */
/*  padding: 50px; */
    display: block;
    border:0;
	}

p a:link {
    text-decoration: none;
    border-bottom: dotted;	
	font-family: century-gothic, sans-serif; 
	font-weight: 700;
	font-style: normal;
	font-size: 12.5pt;
	color: lightpink;
}
p a:visited {
    text-decoration: none;
	font-family: century-gothic, sans-serif; 
	font-weight: 700;
	font-style: normal;
	font-size: 12.5pt;
	color: lightpink;
}
p a:hover {
    text-decoration: none;
    border-bottom: dotted;
	font-family: century-gothic, sans-serif; 
	font-weight: 700;
	font-style: normal;
	font-size: 12.5pt;
	color: lightpink;
}
p a:active {
    color: lightpink;
	font-family: century-gothic, sans-serif; 
	font-weight: 700;
	font-style: normal;
	font-size: 12.5pt;
	color: lightpink;
}  

p.error {}



a,
a:link {}
a:hover {}


/* 10. NAV
-----------------------------------------------------------------------------------------------------------------------------*/

body > #nav_desktop {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
}

#nav_desktop > *,
#nav_desktop > div {
	background: none !important;
	/* background: rgba(0, 0, 0, .0) !important; */
}


.navbar {
	margin-bottom: 0;
	padding: 0 0;
	z-index: 100;
	} 


/*
.navbar-toggle {
     padding-top: 15px;
     margin-top: 0px;
     margin-bottom: 0;
} */

.navbar-nav.navbar-center {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
}

.nav_text {
	font-family: itc-american-typewriter, serif;
    font-weight: 300;
    font-style: normal;
    font-size: 12.5pt;
	color: #ffffff;
	letter-spacing: 2px;
}


/* 50. Header
-----------------------------------------------------------------------------------------------------------------------------*/
header {}


/* 60. Carousel Hero slider
-----------------------------------------------------------------------------------------------------------------------------*/
.carousel {
    top:0;
}

.hero-text {
	padding-top: 50px;
	padding-bottom: 50px;
	background-image: url('./logo_transp.png');
	background-size: auto;
	background-repeat: no-repeat;
	background-position: center -50px; 
	text-shadow: 1px 1px 3px black;
	text-align: center;
	position: absolute;
	top: 75%;
	left: 50%;
	transform: translate(-50%, -75%);
}

.carousel,
.item,
.active {
	height:100vh;
}

.carousel-inner {
	height:100vh;
}
	
.carousel-inner img {
	margin: auto;
}

/* Zz. Bootstrap edit
-----------------------------------------------------------------------------------------------------------------------------*/
.overlay {
	background: black;
	opacity: 0.7;
/*	background-size: cover; */
}


button {
    display: inline-block;
    border: 1px solid;
	border-color: white;
    padding: 10px 10px;
    margin: 0;
    text-decoration: none;
    background: none;
    color: white;
    font-family: century-gothic, sans-serif;
	font-weight:700;
	font-style: normal;
	font-size: 12 pt;
    text-align: center;

}

button:hover,
button:focus {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
}

button:focus {
    outline: 1px solid transparent;
    outline-offset: -4px;
}

button:active {
    transform: scale(0.99);
}

.clearfix::after {
  content: " ";
  clear: both;
  display: table;
}

.responsive-image {
	max-width: 100%;
	height: auto;
}

.center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
 }
<!DOCTYPE html>
<html>
<head>
	<title>Welcome to the Design Angels</title>
	
	<!-- META DATA -->
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="description" content="Welcome to theDesignAngels, we make it look glittery and shiny."/>

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
		<script src="files/lib/jQuery.js"></script>
		<script src="files/lib/lib/popper/Popper.js"></script>
	<!-- BOOTSTRAP CSS -->
		<script src="files/lib/bootstrap.min.js"></script>
		<link rel="stylesheet" type="text/css" href="files/lib/bootstrap.min.css">

	<!-- Libraries & frameworks -->
		<script src="functions.js"></script>
		<link rel="stylesheet" style="text/css" href="style.css"/>
		<link rel="stylesheet" href="xxx">
		
		<link rel="shortcut icon" href="assets/favicon.jpg" type="image/x-icon" />
</head>
<body>

	<!-- NAVBAR -->
		<nav id="nav_desktop" class="navbar navbar-expand-md" role="navigation">
			<!-- Brand -->
			<div class="container-fluid">
				<a class="navbar-brand" href="#"><img src="logo_menu.png"  style="width:180px;height:auto" alt="the Design Angels" data-toggle="tooltip" title="home"></a>
			
			<!-- Collect the nav links, forms, and other content -->
				<!-- Site nav -->
				<ul class="nav navbar-nav navbar-center">
					<li><a href="#services">
                        <span class="nav_text">SERVICES</span>
						</a> &nbsp; &nbsp;
					</li>
					<li><a href="#portfolio">
                        <span class="nav_text">PORTFOLIO</span>
						</a> &nbsp; &nbsp;
					</li>
					<li><a href="#contact">
                        <span class="nav_text">CONTACT</span>
						</a> &nbsp; &nbsp;
					</li>
				</ul>
			
				<!-- Social media -->
				<ul class="nav navbar-nav ml-auto">
					<li><a href="http://facebook.com/thedesignangels" target="_blank" alt="The Design Angels on Facebook">
                        <img src="social/fb_.png" onmouseover="this.src='./social/fb_mouseov.png'" onmouseout="this.src='./social/fb_.png'" style="height: 15px; margin-top: -5px;" >
						</a> &nbsp; &nbsp;
					</li>
					<li><a href="https://www.instagram.com/thedesignangels/" target="_blank" alt="The Design Angels on Instagram">
                        <img src="social/inst_.png" onmouseover="this.src='./social/inst_mouseov.png'" onmouseout="this.src='./social/inst_.png'" style="height: 15px; margin-top: -5px;" >
						</a> &nbsp; &nbsp;
					<li><a href="https://twitter.com/thedesignangels" target="_blank" alt="The Design Angels on Twitter">
                        <img src="social/twit_.png" onmouseover="this.src='./social/twit_mouseov.png'" onmouseout="this.src='./social/twit_.png'" style="height: 15px; margin-top: -5px;" >
						</a> &nbsp; &nbsp;
					</li>
				</ul>
			</div>
		</nav>


	<!-- CAROUSEL HERO -->
		<div id="myCarousel " class="carousel slide" data-ride="carousel">

			<!-- Wrapper for slides -->
			<div class="carousel-inner">
				<div class="carousel-item active">
					<img src="slider-01.jpg" class="overlay">
				</div>

				<div class="carousel-item">
					<img src="slider-02.jpg" class="overlay">
				</div>

				<div class="carousel-item">
					<img src="slider-03.jpg" class="overlay">
				</div>

				<div class="carousel-item">
					<img src="slider-04.jpg" class="overlay">
				</div>

				<div class="carousel-item">
					<img src="slider-05.jpg" class="overlay">
				</div>
			</div>

			<!-- Hero Text -->
			<div class="hero-text container">
				<h1 class="hero-cust">Looking for Character<br> and Innovation ?</h1><br> <br>
					<p style="text-align: center;">The Design Angels have solutions for you,<br> on top of offering advice and custom-made designs</p><br> <br>
					<a href="#contact"><button>GET IN TOUCH</button></a>
			</div>
		</div>
		

	<!-- Introduction -->
		<div class="container-fluid">
			<div class="container">
				<div class="row">
	
					<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="padding-top:50px;">
						<h1>Great design<br>
						is powerful</h1>
					</div>
		
					<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 clearfix" style="padding-top:50px;">
						<p class="tab">Not only does it brings personality and brand recognition to goods or services,
						but it establishes a recognition and creates the <span style="color:lightpink;">feeling of trust</span> we feel for those brands we love.<br> <br> <br></p>
						<p class="tab">Set yourself above the competition with professional design and packaging: <span style="color:lightpink;">great communication</span> shows the world how serious you are about business.
						</p>
					</div>
		
					<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 clearfix" style="padding-top:50px;">
						<img src="mockup.png" class="responsive-image" style="width:200px; height: auto; vertical-align: top; float: right;" >
					</div>
				</div>
			</div>
		</div><br><br><br>
		
		
	<!-- Services -->		
		<div class="container-fluid overlay"><br>
			<div class="container">
				<h1 style="text-align:center;">Our services</h1><br><br>
				<p style="text-align:center;">We always go the extra mile to bring you kick-ass design.</p><br><br><br>
			</div>
		
			<div class="container">
				<div class="row" style="padding-bottom: 50px;">
					<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 specialties clearfix"><br>
						<p style="text-align:center;">
						<img src="drukwerk.png"><br><br><br>PRE-PRESS SPECIALTY<br><br>
						Packagings, posters, cards, flyers,
						letterheads, banners, calendars,
						brochures, books, stickers, 
						custom work... <br><a href="#" alt="Learn more about pre-press possibilities">Know more</a><br>
						</p>
					</div>
				
					<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 specialties clearfix"><br>
						<p style="text-align:center;">
						<img src="illu.png"><br><br>ILLUSTRATION &amp; <br>IMAGE<br><br>
						Commercial illustration for packaging, 
						small animations, logo &amp; branding, 
						photoshopping, vector illustrations, 
						paintings... <br><a href="#" alt="Learn more about illustration and image-creation possibilities">Know more</a>
						</p>
					</div>
				
					<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 specialties clearfix"><br>
						<p style="text-align:center; ">
						<img src="digi.png"><br><br>DIGITAL &amp; <br>WEB<br><br>
						Banners, animated GIFs, brochures,
						PDFs, web sites, videos, social media content... <br><a href="#" alt="Learn more about digital and content-creation possibilities">Know more</a>
						</p>
					</div>
				
				</div>
			</div>
		</div>
    
        <!-- Optional JavaScript -->

	<script src="script.js">
	</script>

</body>
</html>

Thanking you in advance.
Angie.

===============================

Update:

in the CSS, if I remove position: absolute; from body > #nav_desktop { then my navbar becomes transparent but isn’t static.

If I leave that snippet in, the navbar is static, but non-transparent.

The aim is the navbar to be transparent so that the carousel picture remains fully visible.

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    Thank you for all the ideas and input everyone, it kinda got me rethinking how I set the whole thing up.

    While playing around with some elements (in the end, it always comes down to targeting the right classes), I found the solution.

    screen capture of the working solution

    The attribues needed to be moved as follows:

    #nav_desktop > *,
#nav_desktop > div {
    background: none !important;
    position: absolute;
    top: 0 !important;
    transform: translate(0%);

    which would look like this, all put together:

    /*-----------------------------------------------------------------------------------------------------------------------------

	***		Angie's CSS File			|			The Design Angels											***
	---------------------------------------------------------------------------------------------------------------
	Version:			0.0.1
	Date:				02-02-2020

-----------------------------------------------------------------------------------------------------------------------------*/


/* 0. HTML Defaults
-----------------------------------------------------------------------------------------------------------------------------*/
:root {

	--da-pink: lightpink;
	--da-grey: rgba(5,5,5,1);
	--da-grey: #454545;
	--da-grey-grad: linear-gradient(to bottom right, #131313, #454545);
	--da-grey-opac: rgba(69, 69, 69, .8);
	--da-grey-opac: rgb(69, 69, 69);

}

html, body {
	background-color: black; 
    background: rgba(65,65,65,1);
    background: -moz-linear-gradient(-45deg, rgba(65,65,65,1) 0%, rgba(5,5,5,1) 100%);
    background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(65,65,65,1)), color-stop(100%, rgba(5,5,5,1)));
    background: -webkit-linear-gradient(-45deg, rgba(65,65,65,1) 0%, rgba(5,5,5,1) 100%);
    background: -o-linear-gradient(-45deg, rgba(65,65,65,1) 0%, rgba(5,5,5,1) 100%);
    background: -ms-linear-gradient(-45deg, rgba(65,65,65,1) 0%, rgba(5,5,5,1) 100%);
    background: linear-gradient(135deg, rgba(65,65,65,1) 0%, rgba(5,5,5,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#414141', endColorstr='#050505', GradientType=1 );
	background-repeat: no-repeat;
	background-attachment: fixed;
	margin: 0;
	height: 100%;
	overflow: auto;
	z-index: 10;
}

html body * {

}


h1 {
	font-family: century-gothic, sans-serif; 
	font-weight: 700;
	font-style: normal;
	color: lightpink;
	font-size: 3vw;
	line-height: 4vw;
}

h2 {}
h3 {}
h4 {}
h5 {}
h6 {}


p {    
	font-family: itc-american-typewriter, serif;
    font-weight: 300;
    font-style: normal;
    font-size: 12.5pt;
    color: #ffffff;
    text-align: justify;
    text-decoration: none;
/*  text-indent: 50px; */
/*  word-spacing: 5px */
/*  white-space: pre; */
    letter-spacing: 1px;
/*  line-height: 1.3; */
/*  padding: 50px; */
    display: block;
    border:0;
	}

p a:link {
    text-decoration: none;
    border-bottom: dotted;	
	font-family: century-gothic, sans-serif; 
	font-weight: 700;
	font-style: normal;
	font-size: 12.5pt;
	color: lightpink;
}
p a:visited {
    text-decoration: none;
	font-family: century-gothic, sans-serif; 
	font-weight: 700;
	font-style: normal;
	font-size: 12.5pt;
	color: lightpink;
}
p a:hover {
    text-decoration: none;
    border-bottom: dotted;
	font-family: century-gothic, sans-serif; 
	font-weight: 700;
	font-style: normal;
	font-size: 12.5pt;
	color: lightpink;
}
p a:active {
    color: lightpink;
	font-family: century-gothic, sans-serif; 
	font-weight: 700;
	font-style: normal;
	font-size: 12.5pt;
	color: lightpink;
}  

p.error {}



a,
a:link {
	color: white;
	text-decoration:none;
}
a:hover {
	color: white;
	text-decoration:none;
}


/* 10. NAV
-----------------------------------------------------------------------------------------------------------------------------*/

body > #nav_desktop {

	left: 0;
	right: 0;
}

#nav_desktop > *,
#nav_desktop > div {
	background: none !important;
	position: absolute;
	top: 0 !important;
	transform: translate(0%);
	/* background: rgba(0, 0, 0, .0) !important; */
}


.navbar {
	margin-bottom: 0;
	padding: 0 0;
	z-index: 100;
	} 

.navbar-nav.navbar-center {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
}

.nav_text {
	font-family: itc-american-typewriter, serif;
    font-weight: 300;
    font-style: normal;
    font-size: 12.5pt;
	color: #ffffff;
	letter-spacing: 2px;
}


 @media only screen and (max-width: 768px) {
	 
	.navbar-brand > img {
		position: absolute !important;
		left: 50% !important;
		transform: translate(-50%) !important;
		}
 }

ul.d-md-inline > li { 
	display:inline !important; 
}


/* 50. Header
-----------------------------------------------------------------------------------------------------------------------------*/
header {}


/* 60. Carousel Hero slider
-----------------------------------------------------------------------------------------------------------------------------*/
.carousel {
    top:0;
}

.hero-text {
	padding-top: 50px;
	padding-bottom: 50px;
	background-image: url('./logo_transp.png');
	background-size: auto;
	background-repeat: no-repeat;
	background-position: center -50px; 
	text-shadow: 1px 1px 3px black;
	text-align: center;
	position: absolute;
	top: 75%;
	left: 50%;
	transform: translate(-50%, -75%);
}

.carousel,
.item,
.active {
	height:100vh;
}

.carousel-inner {
	height:100vh;
}
	
.carousel-inner img {
	margin: auto;
}

/* 100. Content
-----------------------------------------------------------------------------------------------------------------------------*/
content {}


/* 200. Specialties section
-----------------------------------------------------------------------------------------------------------------------------*/
.specialties {
	height: 375px;
	width: 29%;
	display: inline-box;
	column-gap: 5px !important;
	background-color: black; 
	background: rgba(65,65,65,1);
	background: -moz-linear-gradient(-45deg, rgba(65,65,65,1) 0%, rgba(5,5,5,1) 100%);
	background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(65,65,65,1)), color-stop(100%, rgba(5,5,5,1)));
	background: -webkit-linear-gradient(-45deg, rgba(65,65,65,1) 0%, rgba(5,5,5,1) 100%);
	background: -o-linear-gradient(-45deg, rgba(65,65,65,1) 0%, rgba(5,5,5,1) 100%);
	background: -ms-linear-gradient(-45deg, rgba(65,65,65,1) 0%, rgba(5,5,5,1) 100%);
	background: linear-gradient(135deg, rgba(65,65,65,1) 0%, rgba(5,5,5,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#414141', endColorstr='#050505', GradientType=1 );
	padding: 15px !important;
	margin-right: 10px;
	margin-left: 10px;
	margin-bottom:20px;
	}


/* 900. Footer
-----------------------------------------------------------------------------------------------------------------------------*/
footer {}


/* Zz. Bootstrap edit
-----------------------------------------------------------------------------------------------------------------------------*/
.overlay {
	background: black;
	opacity: 0.7;
/*	background-size: cover; */
}


button {
    display: inline-block;
    border: 1px solid;
	border-color: white;
    padding: 10px 10px;
    margin: 0;
    text-decoration: none;
    background: none;
    color: white;
    font-family: century-gothic, sans-serif;
	font-weight:700;
	font-style: normal;
	font-size: 12 pt;
    text-align: center;

}

button:hover,
button:focus {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
}

button:focus {
    outline: 1px solid transparent;
    outline-offset: -4px;
}

button:active {
    transform: scale(0.99);
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

.responsive-image {
	max-width: 100%;
	height: auto;
}

.center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
 }


/* 10000. TEXT STYLING
-----------------------------------------------------------------------------------------------------------------------------*/
@media print {
    p {
        color: black;
    }
}

.tab { 
	text-indent: 40px; 
	}
    <!DOCTYPE html>
<html>
<head>
	<title>Welcome to the Design Angels</title>
	
	<!-- META DATA -->
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="description" content="Welcome to theDesignAngels, we make it look glittery and shiny."/>
		<meta name="keywords" content="graphic design, design, grafisch, vormgeving, dtp, geleen, limburg, nederland, francophone, franstalig, english, nederlands, vormgever, web sites, packaging, verpakking, creatief, creative, beautiful,thedesignangels, the design angels"/>

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
		<script src="files/lib/jQuery.js"></script>
		<script src="files/lib/lib/popper/Popper.js"></script>
	<!-- BOOTSTRAP CSS -->
		<script src="files/lib/bootstrap.min.js"></script>
		<link rel="stylesheet" type="text/css" href="files/lib/bootstrap.min.css">

	<!-- Libraries & frameworks -->
		<script src="functions.js"></script>
		<link rel="stylesheet" style="text/css" href="style.css"/>
		<link rel="stylesheet" href="https://xxx">
		
		<link rel="shortcut icon" href="assets/favicon.jpg" type="image/x-icon" />
</head>
<body>

	<!-- NAVBAR -->
	
	
		<nav id="nav_desktop" class="navbar navbar-expand-md" role="navigation">
			<!-- Brand -->
			<div class="container-fluid">
				<a class="navbar-brand" href="#"><img src="logo_menu.png"  style="width:180px;height:auto" alt="the Design Angels" data-toggle="tooltip" title="home"></a>
			
			<!-- Collect the nav links, forms, and other content -->
				<!-- Site nav -->
				<ul class="nav navbar-nav navbar-center d-none d-md-inline">
					<li><a href="#services">
                        <span class="nav_text">SERVICES</span>
						</a><span>&nbsp;&nbsp;</span>
					</li>
					<li><a href="#portfolio">
                        <span class="nav_text">PORTFOLIO</span>
						</a><span>&nbsp;&nbsp;</span>
					</li>
					<li><a href="#contact">
                        <span class="nav_text">CONTACT</span>
						</a><span>&nbsp;&nbsp;</span>
					</li>
				</ul>
			
				<!-- Social media -->
				<ul class="nav navbar-nav ml-auto d-none d-md-inline">
					<li><a href="http://facebook.com/thedesignangels" target="_blank" alt="The Design Angels on Facebook">
                        <img src="social/fb_.png" onmouseover="this.src='./social/fb_mouseov.png'" onmouseout="this.src='./social/fb_.png'" style="height: 15px; margin-top: -5px;" >
						</a> &nbsp; &nbsp;
					</li>
					<li><a href="https://www.instagram.com/thedesignangels/" target="_blank" alt="The Design Angels on Instagram">
                        <img src="social/inst_.png" onmouseover="this.src='./social/inst_mouseov.png'" onmouseout="this.src='./social/inst_.png'" style="height: 15px; margin-top: -5px;" >
						</a> &nbsp; &nbsp;
					<li><a href="https://twitter.com/thedesignangels" target="_blank" alt="The Design Angels on Twitter">
                        <img src="social/twit_.png" onmouseover="this.src='./social/twit_mouseov.png'" onmouseout="this.src='./social/twit_.png'" style="height: 15px; margin-top: -5px;" >
						</a> &nbsp; &nbsp;
					</li>
				</ul>
			</div>
		</nav>


	<!-- CAROUSEL HERO -->
		<div id="myCarousel " class="carousel slide" data-ride="carousel">

			<!-- Wrapper for slides -->
			<div class="carousel-inner">
				<div class="carousel-item active">
					<img src="slider-01.jpg" class="overlay">
				</div>

				<div class="carousel-item">
					<img src="slider-02.jpg" class="overlay">
				</div>

				<div class="carousel-item">
					<img src="slider-03.jpg" class="overlay">
				</div>

				<div class="carousel-item">
					<img src="slider-04.jpg" class="overlay">
				</div>

				<div class="carousel-item">
					<img src="slider-05.jpg" class="overlay">
				</div>
			</div>

			<!-- Hero Text -->
			<div class="hero-text container">
				<h1 class="hero-cust">Looking for Character<br> and Innovation ?</h1><br> <br>
					<p style="text-align: center;">The Design Angels have solutions for you,<br> on top of offering advice and custom-made designs</p><br> <br>
					<a href="#contact"><button>GET IN TOUCH</button></a>
			</div>
		</div>
		

	<!-- Introduction -->
		<div class="container-fluid">
			<div class="container">
				<div class="row">
	
					<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12" style="padding-top:50px;">
						<h1>Great design<br>
						is powerful</h1>
					</div>
		
					<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 clearfix" style="padding-top:50px;">
						<p class="tab">Not only does it brings personality and brand recognition to goods or services,
						but it establishes a recognition and creates the <span style="color:lightpink;">feeling of trust</span> we feel for those brands we love.<br> <br> <br></p>
						<p class="tab">Set yourself above the competition with professional design and packaging: <span style="color:lightpink;">great communication</span> shows the world how serious you are about business.
						</p>
					</div>
		
					<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 clearfix" style="padding-top:50px;">
						<img src="mockup.png" class="responsive-image" style="width:200px; height: auto; vertical-align: top; float: right;" >
					</div>
				</div>
			</div>
		</div><br>
		
		
	


    <!-- Optional JavaScript -->

	<script src="script.js">
	</script>

</body>
</html>

    Hope this can eventually help someone...


  2. 0

    Bootstrap 4 supports for the navbar a class called fixed-top. This allows you to make your navbar fixed to the top with a simple class.

    You will need to add this to your nav:

    <nav id="nav_desktop" class="navbar navbar-expand-md fixed-top" role="navigation">

    You can find more info about this here.

    Here is also a quick example that I already tested:

    <!DOCTYPE html>
<html>
<head>
	<title>Welcome to the Design Angels</title>
	
	<!-- META DATA -->
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta name="description" content="Welcome to theDesignAngels, we make it look glittery and shiny."/>

    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
		<script src="files/lib/jQuery.js"></script>
		<script src="files/lib/lib/popper/Popper.js"></script>
	<!-- BOOTSTRAP CSS -->
		<script src="files/lib/bootstrap.min.js"></script>
		<link rel="stylesheet" type="text/css" href="files/lib/bootstrap.min.css">

	<!-- Libraries & frameworks -->
		<script src="functions.js"></script>
		<link rel="stylesheet" style="text/css" href="style.css"/>
		<link rel="stylesheet" href="xxx">
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

		
		<link rel="shortcut icon" href="assets/favicon.jpg" type="image/x-icon" />
</head>
<body>


<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
  <a class="navbar-brand" href="#">Navbar</a>
  <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>
</nav>


  <div class="col-8 offset-1"><h1>bla bla bla</h1></div>
  <div class="col-8 offset-1"><h1>bla bla bla</h1></div>
  <div class="col-8 offset-1"><h1>bla bla bla</h1></div>
  <div class="col-8 offset-1"><h1>bla bla bla</h1></div>
  <div class="col-8 offset-1"><h1>bla bla bla</h1></div>
  <div class="col-8 offset-1"><h1>bla bla bla</h1></div>
  <div class="col-8 offset-1"><h1>bla bla bla</h1></div>
  <div class="col-8 offset-1"><h1>bla bla bla</h1></div>
  <div class="col-8 offset-1"><h1>bla bla bla</h1></div>
  <div class="col-8 offset-1"><h1>bla bla bla</h1></div>
  <div class="col-8 offset-1"><h1>bla bla bla</h1></div>
  <div class="col-8 offset-1"><h1>bla bla bla</h1></div>
  <div class="col-8 offset-1"><h1>bla bla bla</h1></div>
  <div class="col-8 offset-1"><h1>bla bla bla</h1></div>
  <div class="col-8 offset-1"><h1>bla bla bla</h1></div>
  <div class="col-8 offset-1"><h1>bla bla bla</h1></div>
  <div class="col-8 offset-1"><h1>bla bla bla</h1></div>
  <div class="col-8 offset-1"><h1>bla bla bla</h1></div>
  <div class="col-8 offset-1"><h1>bla bla bla</h1></div>
  <div class="col-8 offset-1"><h1>bla bla bla</h1></div>

</body>
</html>
    Login or Signup to reply.
  3. 0

    Just move your Carousel div to top using negative margin-top:

    #myCarousel {
    margin-top: -42px; /* set it equal to the menu height */
}

    And change the position of the menu from absolute to relative:

    body > #nav_desktop {
    position: relative;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search