Update the bootstrap navigation bar

I'm currently using bootstrap to construct my website. The navbar I have is quite typical with menu options, but I am aiming to modify the CSS in order to achieve a design similar to the image provided below (this design should be responsive and functional on mobile devices as well).

https://i.sstatic.net/TedBf.png

The image displayed above illustrates the desired outcome.

<nav class="navbar navbar-default navbar-default-light navbar-fixed-top">
            <div class="container">
        <div class="navbar-header page-scroll">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand page-scroll" href="index.php"><img src="assets/img/img.png" width="152px"></a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li class="hidden">
                    <a href="index.php"></a>
                    <!-- menu options -->
                </li>
            </ul>
        </div>
    </div>
</nav>

CSS code snippet: the CSS for the navbar class utilized is the default style from Bootstrap.

.navbar-default {
    border-color: transparent;
    background-color: #1f3741;
    padding: 25px 0;
    border: 0;
    background-color: #ffffff;
    -webkit-transition: padding .3s;
    -moz-transition: padding .3s;
    transition: padding .3s;
}
.navbar-default-light{
    background-color: transparent;
}

.navbar-default .navbar-brand {
   font-family : Lato,"Helvetica Neue",Helvetica,Arial,cursive;
    color: #1676a9;  
    margin-top:-10px;
}
 .navbar-default .navbar-collapse {
    border-color: rgba(255,255,255,.02);
    padding-top: 15px;
}    
.navbar-default .navbar-toggle {
    border-color: #1676a9;
    background-color: #1676a9;
}    
.navbar-default .navbar-toggle .icon-bar {
    background-color: #fff;
}   
.navbar-default .nav li a {
    font-size: 16px;
    font-family: "Raleway", "Helvetica", sans-serif;
    text-transform: uppercase;
    line-height: 1.2;
    padding: 15px 10px;
    color: rgb(0, 0, 0);
}

.navbar-default-light .navbar-collapse {
    margin-top: 20px;
}
.navbar-default-light .nav li a {
    color: rgb(255, 255, 255);
}   
.navbar-default .navbar-brand {
    font-size: 2em;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;
}

Could someone provide assistance with this issue?

cssbootstrap-4

Answer №1

Exploring the unique combination of bootstrap classes for creating a stunning design for the second image.
Feel free to leverage this snippet for inspiration.

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css');
.navbar-default-light{
  border-color: transparent;
  border: none;
  background-color: #c3c3c3;
}
.navbar-default .navbar-brand {
  color: #1676a9;    
}
.navbar-default .navbar-collapse {
  border-color: rgba(255,255,255,.02);
}      
.navbar-default .navbar-toggle .icon-bar {
  background-color: #fff;
  z-index: 2;
  position: relative;
  margin-left: 14px;
  height: 3px;
}   
.navbar-default-light .nav li{
  width: 100%;
  display: block;
  float: none;
  text-align: center;
}
.navbar-default-light .nav li a {
  line-height: 1.2;
  font-size: 16px;
  text-transform: uppercase;
  color: #000;
}   
.navbar-default-light .navbar-toggle{
  display: block;
  right: -15px;
  margin-right: 0px;
  position: absolute;
  border-radius: 0;
  border: none;
  background: #999;
  height: 100%;
  top: 0;
  width: 50px;
  outline: none;
  text-align: center;
  padding-left: 0;
  padding-right: 0;
  margin-top: 0;
  overflow: hidden;
}
.navbar-default-light .navbar-toggle:hover{background: #999; opacity: 0.75}
.navbar-default-light .navbar-toggle:before{
  content: '';
  position: absolute;
  width: 80px;
  height: 80px;
  top: 10px;
  left: -46.5px;
  background: #1676a9;
  transform: rotate(-45deg);
  transform-origin: center;
  z-index: 0;
}
.navbar-right {
  float: none!important; 
  margin-right: 0px;
  top: 0;
  width: 100%;
}
.collapse.in, .collapsing{
  width: 100%!important;
  min-width: 100%;
}
.navbar-items{
  position: absolute;
  height: auto;
  background: #ccc;
  top: 50px;
  left: 0;
  overflow: hidden;
  overflow-y: auto;
  max-height: 250px;
}
@media(max-width: 767.98px){
 .navbar-default-light .navbar-toggle {
    right: -30px;
  }
}
<nav class="navbar navbar-default navbar-default-light navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header" style="position: relative; width: 100%;">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bscollapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand Name</a>
    </div>
    <div class="collapse navbar-collapse1 navbar-items" id="bscollapse">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Menu #1</a></li>
        <li><a href="#">Menu #2</a></li>
        <li><a href="#">Menu #3</a></li>
        <li><a href="#">Menu #4</a></li>
        <li><a href="#">Menu #5</a></li>
        <li><a href="#">Menu #6</a></li>
        <li><a href="#">Menu #7</a></li>
        <li><a href="#">Menu #8</a></li>
        <li><a href="#">Menu #9</a></li>
        <li><a href="#">Menu #10</a></li>
        <li><a href="#">Menu #11</a></li>
        <li><a href="#">Menu #12</a></li>
        <li><a href="#">Menu #13</a></li>
        <li><a href="#">Menu #14</a></li>
        <li><a href="#">Menu Last</a></li>
      </ul>
    </div>
</div>
</nav>


<div style="min-height: 100vh; padding-top: 70px;">
<div class="container">
<div class="row">
<div class="col-sm-12">
<p>
Diving deep into the realm of creative bootstrap classes to craft a mesmerizing design for the second image.</p>
<p>Unleash your creativity and let this code snippet pave the way for your design journey.</p>

</div>
</div>
</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using HTML and CSS, change the background color to red based on the value of each cell in a forEach loop

Need help with my HTML/CSS code. I have a table where I need to change the background color of any row that has a cell value of "Not Approved" while using a foreach loop in Google Apps Script to send an email with two tables. What is t ...

htmljquerycss

Parent whose height is less than that of the child element

I'm working on creating a side menu similar to the one on this website. However, I'm facing an issue with the height of the #parent list element. I want it to match the exact same height as its content (the #child span - check out this jsfiddle). ...

htmlcsspositionheighthtml-lists

What is the benefit of utilizing pseudo elements to divide block elements?

I'm seeking clarification on a w3school example that showcases responsive grid design. <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> * { box-sizing: bo ...

htmlcss

Is it possible to use columns in the Bootstrap 4 grid system to create text that wraps around an image?

I have been searching for a solution all day without success. Can anyone help me figure out how to wrap text around an image using d-flex or flex-wrap in Bootstrap 4's grid layout with columns and rows? Below, I have shared my code and included two im ...

cssflexboxgridbootstrap-4word-wrap

What is causing items to stack using responsive CSS?

My portfolio page is structured in a grid layout that is responsive on most devices, but encounters issues on certain mobile devices like the Nexus 6P. The content ends up stacking in a strange way, similar to Russian Dolls. UPDATE: Through troubleshootin ...

cssresponsiveness

Concealing div containers and eliminating gaps

Looking for a way to filter div boxes using navigation? Check this out: <ul> <li><a href="javascript:void(0);" data-target="apples">Appels</a></li> <li><a href="javascript:void(0);" data-target="bananas">Ban ...

javascriptjquerycss

Disappearing CSS Box Shadows

I'm attempting to replicate effect number 2 from a website I found, but I'm running into an issue. Whenever I add more HTML content to the page, the effect disappears. Here is a sample of what I have so far: http://jsfiddle.net/aHrB7/ Here is a ...

htmlcss

I'm attempting to arrange the movieCards in a horizontal row, but they keep stacking up vertically instead

I have created a movie list component with different attributes in the div section to display the cards in a row. However, all the cards are currently aligned in a column. Should I use flex or grid to achieve the desired layout? If so, how can I implement ...

javascriptcssreactjsbootstrap-5flexboxgrid

Aligning multiple items to the right using Flexbox

While it's common knowledge how to align one item to the right in flexbox, what about aligning multiple items, like the last two elements, to the right and the rest to the left? Take a look at this example where I want elements with the class .r to be ...

htmlcssflexbox

JavaScript components in Bootstrap 4.1 are malfunctioning

It seems that Bootstrap 4.1 Components requiring JavaScript are not functioning properly when utilizing the quick start template. Components like: - tooltip - popover A code snippet with this issue can be found in the following Plunk. The code uses the ...

bootstrap-4

What is the best way to connect data so that when a user clicks on a specific card, it appears on a popup card

When a user clicks on any card containing data retrieved from a backend API GET method, that data should be displayed in a pop-up card. In my situation, I have two components: DisplayNotes.vue and UpdateNotes.vue. Whenever a user clicks on a displayed card ...

javascripthtmlcssvue.jssass

The integration of HTML and CSS using ng-bind-html appears to be malfunctioning

<ion-item ng-bind-html="renderHtml(word[key])"> </ion-item> When referring to word[key], it represents: <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> This is the CSS being u ...

javascripthtmlcssangularjs

How can I make the Search String stand out in the mysql result?

Here's the code I've written up to now <form method="post" name="search"> <input type="search" name="k" placeholder="Enter Keywords"> <input type="submit" value="Search"> </form> <? $skw = $_POS ...

phphtmlcss

Looking to switch the markers from circles to icons in the GeoChart component of react-google-charts

During my personal project, I came across the react-google-charts library and discovered a method to add markers to the map. <Chart width={"200%"} height={"100%"} chartType={"GeoChart"} data={geoData} rootProps={{ "data-testid": "1" ...

cssreactjsgoogle-maps-markersreact-google-chartsreact-google-maps-api

Is it possible to use only CSS to determine if text has wrapped and apply different styles to it?

Let's say we have a button with lengthy text: [Click here to find out more] Due to its length, the text may be split on smaller screens like this: [Click here to find out more] The goal is to align the text to the left when wrapped and to the ce ...

htmlcss

Tips for resolving the final item issue in Owl Carousel when using right-to-left (RTL)

Encountering a bug with the rtl setting in owl-carousel. When the rtl is applied to the slider and I reach the last item, the entire slider disappears! Here's the code snippet: var viewportWidth = $("body").innerWidth(); if (viewportWidth & ...

javascripthtmljquerycssowl-carousel

Learn how to hide a bar after clicking the "I agree" button with the help of Bootstrap

click here to see imageIs there a way to make that bar disappear once the user clicks "I agree"? I've searched through Bootstrap documentation but couldn't find a solution. Please assist. Below is the code snippet: <div id="cookie-message" cl ...

javascripthtmlbootstrap-4bootstrap-modal

What strategies can be used to avoid a single dangling word at the end of a line within an HTML element?

I am in the process of developing a straightforward webpage with marketing content. One aspect I find unfavorable is when a line of text stretches too long and breaks onto the next line, which is acceptable; however, it often splits in a manner where there ...

htmlcssformatting

Combining a background image and gradient in Internet Explorer: a comprehensive guide

I recently encountered a challenge while trying to apply a gradient and a background image to an element using CSS. After utilizing Colorzilla for the gradient, I obtained the following code snippet. background: rgb(250,250,250); background: -moz-linear-g ...

jquerycssinternet-explorergradient

Troubination of Bootstrap CSS is causing issues on Floating Action Menu

I've implemented a Floating Action Menu using JQuery and CSS: HTML: <script src="https://code.jquery.com/jquery-1.11.3.js"></script> <div id="hamburger" class="waves-effect waves-light"> <div id="wrapper"> <span ...

jquerycssbootstrap-4floating-action-button