Create a custom navigation bar using Bootstrap styling

I am currently attempting to create a unique Navigation Bar design using bootstrap

https://i.sstatic.net/HDGFw.jpg

Here is the code snippet I am working on:

<div class="navbar-header">
          <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>
          <style>
          </style>
          <style>
            #nav-brand-bg{
              background-color: red;
              width: 100px;
              height: 100px;
              position: relative;
            }
          </style>
          <div id="nav-brand-bg"></div>
            <a class="navbar-brand" href="index.html">
            <img src="http://smarti-oc.dev/image/templates/smarti-new-logo.png" alt="">
          </a>
          <a class="navbar-brand" href="index.html">
            <img src="http://smarti-oc.dev/image/templates/malaysia_resize.png" alt="">
          </a>
      </div>

Are there any tips or helpful insights you can provide to improve this design? Thank you!

csstwitter-bootstrapuser-interfacefrontend

Answer №1

Here's my take on it...

    #nav-brand-bg {
      background-color: red;
      width: 100px;
      height: 100px;
      position: relative;
    }
    
    #navwrap {
      position: absolute;
      width: 90%;
    }
    
    #trapezoid {
      border-top: 100px solid black;
      border-left: 50px solid transparent;
      border-right: 50px solid transparent;
      -webkit-transform: skew(-27deg);
      -moz-transform: skew(-27deg);
      -o-transform: skew(-27deg);
      height: 0;
      width: 100px;
      left: -25px;
      position: relative;
    }
    
    #bar {
      width: 100%;
      background-color: black;
      height: 40px;
      position: absolute;
      top: 30px;
    }
<div class="navbar-header">
  <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>

  <div id="nav-brand-bg"></div>
  <div id="navwrap">

    <div id="trapezoid">

    </div>
    <div id="bar">

    </div>
  </div>

I approached this in a slightly different way, considering the images you mentioned. Let me know if this aligns with what you had in mind.

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

series of lines including <ListItemText>

https://i.sstatic.net/L8FUC.png I have been using Material-ui with react. Currently, I am working on creating a list in React that contains long text. However, when the text is too long, it is displayed as a single line which is not what I want. I would ...

cssreactjsmaterial-ui

Maintain continuous visibility of horizontal scroll in Bootstrap responsive tables

When utilizing responsive bootstrap tables in a .net web application to showcase data, the issue arises when a substantial amount of information is returned. In such cases, a horizontal scroll bar appears at the bottom of the page. This forces users to s ...

htmlasp.net.nettwitter-bootstraptwitter-bootstrap-3

Is there a way to determine the negative horizontal shift of text within an HTML input element when it exceeds the horizontal boundaries?

On my website, I have a standard HTML input field for text input. To track the horizontal position of a specific word continuously, I have implemented a method using an invisible <span> element to display the content of the input field and then utili ...

javascripthtmlcssinput

Calculating the dimensions of a CSS element based on its content

Is there a way to achieve this using only CSS, without needing JavaScript? I am working on a project with a lot of relative and absolute positions, where elements must be centered dynamically without specifying static widths. While I have managed to minimi ...

css

Conceal/Inactivate element when scrolling, and once scrolling comes to a halt, reveal it once more

I have been working on creating a div tag to overlay an embed tag and added some javascript to prevent users from right-clicking to download the pdf inside the embed tag (even though it may seem unnecessary, it was requested by my customer). Here is the ma ...

javascripthtmlcss

Upon the initial gallery load, the images are appearing on top of each

Currently, I am working on creating a gallery page for my website using the Isotop filtering plugin. To view the live gallery, you can visit: carroofies.com/gallery The main issue I am encountering is with the initial load of the page, where the images ov ...

htmlcssoverflow

Change the background color according to the user's input text

I want to create a text box where users can input color keywords like blue, lime, or black. When they click submit, I want the background color of the page to change accordingly. This is what I have so far: <label for="color">Color: </label> ...

javascripthtmlcss

Ensuring a fixed table with vertical scrolling only, no horizontal scrolling, while scrolling in either direction

I'm working with an HTML fixed design that contains a center-aligned table with extensive data scrollable both vertically and horizontally. To address the issue of keeping column headers visible when scrolling vertically, I used jQuery's clone() ...

javascriptjqueryhtmlcssposition

What is the best way to position a table caption at the top of a table?

I need help setting up a calendar within a table structure, and I'm struggling to add a caption at the top of the table. Unfortunately, I can't modify the current table structure. I want it to resemble the example shown below: https://i.sstatic. ...

htmlcsshtml-tablecalendarcss-tables

Using Javascript to Change Background Color on Button Click

The button press does not result in a change of the background color. What could be causing this issue? var body = document.getElementsByTagName("body"); var bgbutton = doucument.getElementById("bgchange"); bgbutton.onclick = function() { body.style.b ...

javascripthtmlcss

What is the best way to customize the appearance of a mat-checkbox in Angular using Angular Material?

Is there a way to customize the appearance of a mat-checkbox that actually works? I've tried various solutions without success. I attempted to disable view encapsulation and use classes like mdc-checkbox__background, but nothing changed. Even applyin ...

cssangularangular-material

Overlapping Issue with Angular Bootstrap Dynamic Dropdown Menu

I'm currently working on creating a dynamic menu using Angular and Bootstrap for Angular. My main issue right now is that the submenus are overlapping each other when displayed on the page. To tackle this problem, I started off by referring to the ex ...

htmlcssangularng-bootstrap

Swap out the string variable when it is modified

To generate a string inside the "code" variable that combines the selected image values, the final code should appear similar to: "test1/A=1a/B=1b" or "test2/A=1b/B=1a", etc. If the user modifies icon "A," it should replace the value in the code instead of ...

javascriptjquerycsshtml

The carousel's slides don't behave properly when swiping or using the slider controls (next/prev)

I have recently completed the construction of a carousel with swipe/touch functionality and control buttons for previous and next slides. However, I am facing an issue with the behavior of the carousel as it seems to be sliding by 2 or 3 instead of one at ...

javascriptjquerycsshammer.js

Which element is able to utilize the inline-block style?

Currently, I am delving into the intricacies of the inline-block attribute and have a basic understanding that it allows elements to sit on the same row rather than stack on top of each other as they would in a normal layout. However, my grasp on how exact ...

htmlcss

I can't seem to shake off this constant error. Uncaught TypeError: Unable to access property 'classList' of null

I am facing an issue with the "Contact Me" tab as it does not display its content when clicked. Here is the code snippet: <body> <ul class="tabs"> <li data-tab-target="#home" class="active tab">Home< ...

javascripthtmlcss

Tips for customizing the appearance of a mat-select chosen item?

Is there a way to modify the color of the selected option text in a mat-select component within an Angular 15 project? .html <mat-form-field> <mat-label>From</mat-label> <mat-select panelClass="mat-select-red"> ...

cssangularsass

Unable to style table borders using CSS

I'm having trouble getting the borders to show up on my tables in my application. I added the "border: solid 2px black" line to my CSS, but nothing seems to be changing. Can anyone point out what I might be doing wrong? Here is my CSS: table { ma ...

cssasp.net-mvc

What is the relationship between html, body, and window when scrolling through code?

I've been working on adding a scroll-to-top button to my website. After doing some research online, I came across this code snippet: $('html, body').animate({scrollTop:0}, 'slow'); It's interesting that they are trying to scr ...

javascripthtmljquerycss

Developing a custom mixin to alert a banner at the top of the webpage

I currently have a feature on my website that triggers a pop-up notification whenever a message is received from another user. The pop-up consists of a div displaying the content of the message along with a close button. After exploring various methods to ...

htmlcsscss-transitions