I am trying to create a page header with a specific requirement of the banner image, which has a 4 cross lines in the design along with the logo.
Image: https://sample.tiiny.site/resources/home-banner-bg.png
I have to place some text on the dark blue bar & some on the light blue bar. so that they should be aligned with the image in the left logo.
<!doctype html>
<html lang="en">
<head>
<!-- Bootstrap CSS -->
<link rel="stylesheet" type="text/css" href="https://sample.tiiny.site/resources/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://sample.tiiny.site/resources/style.css">
<link rel="stylesheet" type="text/css" href="https://sample.tiiny.site/resources/owl.carousel.css">
<style>
.nav-link {
color: #ffffff;
text-transform: uppercase !important;
}
body {
padding-top: 0px;
margin-top: 0px;
}
.carousel-caption {
bottom: 0rem;
right: -15rem;
left: 30rem;
z-index: 999;
/*z-index: 0;*/
}
</style>
</head>
<body style="margin: 0px; border: 0px;">
<!--Trying to achieve with carousel-->
<div class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<a href="/sell-your-boat">
<img src="https://sample.tiiny.site/resources/home-banner-bg.png" class="d-block w-100">
</a>
<div class="carousel-caption text-end">
<nav class="navbar navbar-expand-lg">
<div class="mx-auto d-sm-flex d-block flex-sm-nowrap">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Pricing</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">List 1</a></li>
<li><a class="dropdown-item" href="#">List 2</a></li>
<li><a class="dropdown-item" href="#">List 3</a></li>
<li><a class="dropdown-item" href="#">List 4</a></li>
<li><a class="dropdown-item" href="#">List 5</a></li>
<li><a class="dropdown-item" href="#">List 6</a></li>
<li><a class="dropdown-item" href="#">List 7</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Products
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">List 1</a></li>
<li><a class="dropdown-item" href="#">List 2</a></li>
<li><a class="dropdown-item" href="#">List 3</a></li>
<li><a class="dropdown-item" href="#">List 4</a></li>
<li><a class="dropdown-item" href="#">List 5</a></li>
<li><a class="dropdown-item" href="#">List 6</a></li>
<li><a class="dropdown-item" href="#">List 7</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<br />
<p class="white small text-center text-uppercase" style="padding: 0px; margin: 2px;">
Elevate your app development with .NET 8.
</p>
<p class="small text-center" style="font-size: x-small; font-weight: 300; padding: 0px; margin: 1px; color: #f2ebeb;">
Fully-featured integrated development environment (IDE) on Windows for building every type of .NET application.
<br />
Develop on Linux, macOS, or Windows to build cross-platform websites and services. Install the C# Dev Kit to get the best experience.
</p>
</div>
</div>
</div>
</div>
<!--Trying to achieve with Table-->
<br /><br /><br />
<h2>Table with Background Image</h2>
<table class="d-none d-sm-block table-responsive" style="padding: 0px; width: 100%;background-image:url('https://sample.tiiny.site/resources/home-banner-bg.png');background-repeat: no-repeat;background-size:cover;" border="1">
<tr style="padding: 0px;height:100px;width:30%">
<td style="padding: 0px;width:500px;" rowspan="2">
</td>
<td>
<nav class="navbar navbar-expand-lg">
<div class="mx-auto d-sm-flex d-block flex-sm-nowrap">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Pricing</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">List 1</a></li>
<li><a class="dropdown-item" href="#">List 2</a></li>
<li><a class="dropdown-item" href="#">List 3</a></li>
<li><a class="dropdown-item" href="#">List 4</a></li>
<li><a class="dropdown-item" href="#">List 5</a></li>
<li><a class="dropdown-item" href="#">List 6</a></li>
<li><a class="dropdown-item" href="#">List 7</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Products
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">List 1</a></li>
<li><a class="dropdown-item" href="#">List 2</a></li>
<li><a class="dropdown-item" href="#">List 3</a></li>
<li><a class="dropdown-item" href="#">List 4</a></li>
<li><a class="dropdown-item" href="#">List 5</a></li>
<li><a class="dropdown-item" href="#">List 6</a></li>
<li><a class="dropdown-item" href="#">List 7</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
</td>
</tr>
<tr style="padding: 0px; height:100px; width: 70%;">
<td style="padding: 0px;">
<p class="white small text-center text-uppercase" style="padding: 0px; margin: 2px;">
Elevate your app development with .NET 8.
</p>
<p class="small text-center" style="font-size: x-small; font-weight: 300; padding: 0px; margin: 1px; color: #f2ebeb;">
Fully-featured integrated development environment (IDE) on Windows for building every type of .NET application.
<br />
Develop on Linux, macOS, or Windows to build cross-platform websites and services. Install the C# Dev Kit to get the best experience.
</p>
</td>
</tr>
</table>
</body>
</html>
Approach 1: I have tried with carousel, and using carousel-caption to place the text on top of it. The challenge is in different screen texts are not looking great. Also if navbar dropdown is cut, as I see the restriction of dropdown being confined to the carousel area only. whereas I have longer dropdowns.
Approach 2: I have tried with table with image in the background, but not able to position the text, it keeps overlapping with the image. Also navbar dropdown issue still persists.
Please advise what would be the best way to handle this. I have put the sample here, Also I have the complete code in the code snippet.
I couldn’t see a way to utilize a carousel or a table to construct your navbar. It may be easier to stick with Bootstrap’s general navbar setup.
One approach to having a second section below your navbar would be to treat it like a second navbar. It would be complicated to have the logo image and the Lorem Ipsum text cover the two sections (and having diagonal lines). You might be able to do something by absolutely positioning the logo image, but it could be complicated to get it to work on all screen sizes.
On large screens, to have your menu align with your secondary text, you could style the navbar-brand and the navbar-collapse to be the same size as columns so the links and text would line up.
On medium size screens (i.e. tables), you could have the secondary text centered and the Lorem Ipsum next to the logo image.
On mobile size screens (i.e. phones), you could have the Lorem Ipsum text wrap below the logo.
The white links and text on your blue background don’t have enough contrast to meet the WCAG 2 AAA standard, so you might want to adjust the blues and also use an underline instead of Bootstrap’s normal transparent text to indicate which page you’re on.
<link href="https://fonts.googleapis.com/css2?family=Proza+Libre:wght@300,400;700&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<style>
body {
font-family: "Proza Libre", sans-serif;
font-weight: 400;
font-style: normal;
}
.bg-rajiv-navbar {
background: linear-gradient(0deg, rgba(33, 105, 164, 1) 0%, rgba(34, 103, 162, 1) 100%);
}
.dropdown-menu {
background-color: #0490c7;
}
.subheading {
width: 100%;
margin-top: 94px;
background-color: #038fc5;
}
.navbar-brand {
white-space: normal;
max-width: 60%;
}
@media (min-width: 576px) {
.navbar-brand {
white-space: nowrap;
}
.subheading {
margin-top: 64px;
}
}
@media (min-width: 992px) {
.navbar-brand {
width: 25%;
margin-right: 0;
}
.navbar-expand-lg .navbar-collapse {
width: 75%;
}
}
@media (min-width: 1200px) {
.navbar-brand {
width: 41.666667%;
}
.navbar-expand-lg .navbar-collapse {
width: 58.333333%;
}
}
</style>
<nav class="navbar fixed-top navbar-expand-lg bg-rajiv-navbar" data-bs-theme="dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="https://placehold.co/214x38/6a6d2c/fff/png?text=Company+LOGO" class="logo d-inline-block">
<span class="text-nowrap">Lorem Ipsum</span>
</a>
<button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mx-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Pricing</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">List 1</a></li>
<li><a class="dropdown-item" href="#">List 2</a></li>
<li><a class="dropdown-item" href="#">List 3</a></li>
<li><a class="dropdown-item" href="#">List 4</a></li>
<li><a class="dropdown-item" href="#">List 5</a></li>
<li><a class="dropdown-item" href="#">List 6</a></li>
<li><a class="dropdown-item" href="#">List 7</a></li>
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Products
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">List 1</a></li>
<li><a class="dropdown-item" href="#">List 2</a></li>
<li><a class="dropdown-item" href="#">List 3</a></li>
<li><a class="dropdown-item" href="#">List 4</a></li>
<li><a class="dropdown-item" href="#">List 5</a></li>
<li><a class="dropdown-item" href="#">List 6</a></li>
<li><a class="dropdown-item" href="#">List 7</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="subheading">
<div class="container-fluid">
<div class="row mx-0">
<div class="col col-lg-9 offset-lg-3 col-xl-7 offset-xl-5">
<p class="text-light small text-center text-uppercase" style="padding: 0px; margin: 2px;">
Elevate your app development with .NET 8.
</p>
<p class="text-light small text-center" style="font-size: x-small; font-weight: 300; margin: 1px;">
Fully-featured integrated development environment (IDE) on Windows for building every type of .NET application.
<br />
Develop on Linux, macOS, or Windows to build cross-platform websites and services. Install the C# Dev Kit to get the best experience.
</p>
</div>
</div>
</div>
</div>
<div style="height: 120vh;">
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>This doesn’t get you what you are looking for regarding the logo and diagonal lines, but it might give you some ideas.