Embed the bootstrap menu within a customized div

I have a unique div containing a combination of CSS styles and a Bootstrap menu. My goal is to integrate the menu within the same div using CSS to achieve the following structure:

ABOUT US - HISTORY QUALITY

To accomplish this, I intend to insert the text "ABOUT US" and then utilize the nav element to combine it with the menu. Any insights on how I can make this happen? Thank you

You can find a Fiddle showcasing the current menu and styled div.

Html:

<div class="titulo" width:="100px" height:="30px" style="text-align:left;">ABOUT US</div>

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-sidebar-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>
    <div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1">
      <ul class="nav navbar-nav .font_black">
        <li>
          <a class="font_black" href="#office">HISTORY
            <span style="font-size:16px;" class="pull-right hidden-xs showopacity"></span>
          </a>
        </li>
        <li>
          <a class="font_black" href="#group">QUALITY
            <span style="font-size:16px;" class="pull-right hidden-xs showopacity"></span>
          </a>
        </li>
        <li>
          <a class="font_black" href="#global">GLOBAL PRESENCE
            <span style="font-size:16px;" class="pull-right hidden-xs showopacity"></span>
          </a>
        </li>
        <li>
          <a class="font_black" href="#clients">CLIENTS AND AWARDS
            <span style="font-size:16px;" class="pull-right hidden-xs showopacity"></span>
          </a>
        </li>
        <li>
          <a class="font_black" href="#sustent">SUSTAINABILITY
            <span style="font-size:16px;" class="pull-right hidden-xs showopacity"></span>
          </a>
        </li>
        <li>
          <a class="font_black" href="#legal">LEGAL
            <span style="font-size:16px;" class="pull-right hidden-xs showopacity"></span>
          </a>
        </li>
      </ul>
    </div>
  </div>
</nav>

CSS:

.titulo {
  height: 40px;
  padding: 0 0 0 25px;
  font-size: 20px;
  font-weight: 600;
  background-color: #0039a6;
  text-transform: uppercase;
  color: #ffffff;
  line-height: 40px;
}
htmltwitter-bootstrapcssnavbar

Answer №1

There are a couple of considerations to keep in mind:

  1. It's recommended to utilize the Navbar Brand feature and style it accordingly rather than using a separate styled div

  2. The Bootstrap navbar, as per Bootstrap 3 documentation, may not automatically adjust for the size of your menu items and could wrap onto a second row if needed

Dealing with Overflowing Content

Since Bootstrap doesn't inherently know the space requirements of the content within your navbar, you might encounter issues with content wrapping onto a second row. To address this, consider:

  • Reducing the amount or width of navbar items.
  • Hiding specific navbar items at particular screen sizes using responsive utility classes.
  • Adjusting the breakpoint at which your navbar switches between collapsed and horizontal modes. You can customize the @grid-float-breakpoint variable or add your own media query.

Code Snippet: Switch to Full Screen to view

.navbar-brand {
  background-color: blue;
  color: white !important;
}

ul.nav.navbar-nav li a {
  text-transform: uppercase;
}
<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/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<nav class="navbar navbar-default">
  <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>
      <a class="navbar-brand" href="#">About Us</a>
    </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">
        <li class="active"><a href="#">History</a></li>
        <li><a href="#">Quality</a></li>
        <li><a href="#">Global Presence</a></li>
        <li><a href="#">Clients</a></li>
        <li><a href="#">Sustentability</a></li>
        <li><a href="#">Legal</a></li>
      </ul>
    </div>
  </div>
</nav>

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

Utilizing PHP for file uploading and inserting the file path into a MySQL database

FileUpload.php: <?php //Directory to save uploaded images $targetDir = "img/"; $targetFilePath = $targetDir . basename($_FILES['uploadedFile']['name']); //Get form data $fileName = $_POST['uploadedFile']; $fileDescriptio ...

phphtmlmysqlweb

What advantages does em have over px in the Zurb Foundation's responsive grid system?

The Zurb Foundation Media Queries are specified in em units: $small-range: (0em, 40em); /* 0, 640px */ $medium-range: (40.063em, 64em); /* 641px, 1024px */ $large-range: (64.063em, 90em); /* 1025px, 1440px */ $xlarge-range: (90.063em, 120em); /* 1441px, 1 ...

cssmedia-querieszurb-foundationbreakpoints

Ways to reveal concealed div elements when hovering the mouse?

Is there a way to display a group of hidden div's when hovering over them? For instance: <div id="div1">Div 1 Content</div> <div id="div2">Div 2 Content</div> <div id="div3">Div 3 Content</div> All div's sho ...

javascriptjqueryhtmlcssmouseover

The :not selector in a chained condition is not functioning properly for a child div

I have a child div that is being impacted by the .img class. Even when I use the :not selector for this div like so .main .content .index-exp .img:not(.view-image){ /*rest*/ } it continues to affect my div. You can view the issue at this link. Is this ...

htmlcsscss-selectors

What is the process for determining the default character length in a <p> tag based on its height and width?

I'm trying to determine the default length for the <p> tag in HTML. It should be displayed based on the height and width of the <p> tag. For example: Consider the following code snippet, <p style="height:300px;width:200px;"> </ ...

javascriptjqueryhtml

Instructions on implementing getJSON in this code

I recently set up a chained select box with JSON data to populate options, using this Fiddle. While the data is hardcoded for now, I am looking to load it using the $.getJSON() method. However, despite my efforts, I haven't been able to get the code r ...

javascriptjqueryhtmljsongetjson

Tips on modifying classes within specific sections of HTML tables

I attempted to create calendar-like tables, In my script, I am trying to handle events being registered. My goal is to change the classes of cells from 2 to 5 when they are clicked on, and change the cell colors from first to hovered to aqua. For this p ...

javascriptjqueryhtmlcss

jQuery fails to hide DIVs when jQuery.show() has been utilized in a previous event

I've always considered myself pretty proficient in jQuery, but this particular issue has me stumped. Essentially, I have a click event that should hide one DIV (a placeholder) and show two others (an input section and control buttons section). However ...

javascriptjquerycsshtml

Stop video and audio playback in an android webview

Is there a way to pause audio and video in an Android WebView without disrupting the page rendering? I have tried various methods but haven't found one that successfully pauses both the sound and the video without affecting the WebView. webView.onPau ...

javascriptandroidhtmlwebviewandroid-webview

What is the best way to limit the number of visitors allowed on a webpage?

I'm in the process of working on an application that includes an edit button: Here's my edit button: <th title="Edit task" class="edit" style="float: right; $color;"> <?php echo "<a href=edit.php?id=" . $row["id"] . "> ...

phphtmlmax

Break down the organization of CSS

While exploring a website, I came across this CSS code that sets the font family to "Open Sans," Helvetica, Arial, and sans-serif. However, I am having trouble understanding this structure. Any assistance would be greatly appreciated. Thank you in advanc ...

htmlcss

A method for locating the shadow's exact position

Can anyone assist me in determining the algorithm to calculate the position of a shadow based on the object's rotation? For instance, suppose I have a PNG image with -webkit-filter: drop-shadow(rgba(0, 0, 0, 0.5) Xpx Ypx 0px); and -webkit-transform: ...

jqueryalgorithmcss

Even though the onSubmit attribute is set to false in the HTML form, it still submits

I've been struggling with a form that just won't stop submitting, no matter what I do. I have checked similar questions on SO, but none of the solutions seem to work for me. It's frustrating because it's such a simple task. The reason w ...

javascriptjqueryhtmlvalidation

Detecting collisions on a tile map using only JavaScript

Currently, I am developing a tile-based game using a traditional method (utilizing two for loops) and struggling with writing collision detection. I want the blue square to remain on the screen and appear on top of the tiles once the start button is clicke ...

javascripthtmlcsscanvas

Running intricate javascript/jquery/json code using an html checkbox

Hey there, I'm hoping this issue is simpler than I'm making it out to be... So, I've got this pretty complex JSON/jQuery function (3000 lines long) that builds a DOM tree in a separate JS file. This JS file also contains a bunch of other on ...

javascriptjqueryhtmljson

If there are no spaces, text will be removed from my list group

While working on developing a forum, I encountered an issue where if I repeatedly input letters or words without any spaces, it causes everything to overlap. Below is an example highlighting this problem: https://i.sstatic.net/KStNq.png Although there is ...

cssbootstrap-5

Integrating AJAX functionality into a PHP webpage with various options selected

I'm a beginner coder looking for some assistance. Currently, I have a page with four select inputs, each with two options. When all selections are made and the submit button is clicked, a specific song out of 16 based on the choices will play in an a ...

phphtmlajaxformsselect

Tips for properly passing data from Ajax to PHP and extracting value from it

I'm curious about how to receive a value from Ajax and then send that value to PHP. Can anyone provide some guidance on this? Specifically, I need the percent value obtained from Ajax to be sent to $percent for option value. <div class="form-g ...

phphtmljqueryajax

The block tag on line 8 is invalid: 'endblock'. Have you perhaps overlooked registering or loading this tag?

As a newcomer to Django, I have been learning from various Youtube tutorials. Even though I followed the steps exactly, I encountered a block tag error in my code. Here is an excerpt from my base.html template: <head> <meta charset="UTF-8"& ...

pythonhtmldjango

CSS alone has the power to make multiple elements react to a hover action on a div

Is there a way to dynamically change the size of multiple div elements on hover? In this example, we can see how one div element's size changes when hovering over another div element: https://jsfiddle.net/9510a6kj/ .left, .right{ float:left; ...

htmlcsscss-selectorshover