The Bootstrap navigation menu fails to extend the parent div when toggled

When I toggle the button to show the menu on small screens, the menu overflows the parent div with id=contents instead of pushing it down. How can this issue be fixed?

Here is the code:

<body>

    <nav id="header" class="navbar navbar-default">
      <div class="container">
        <!-- 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="#navmenu" 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="#"><img id="logo" src="images/art-of-hair.png"></a>

        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div id="navmenu" class="collapse navbar-collapse">
          <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="#">Home<span class="sr-only">Home</span></a></li>
            <li><a href="#">Hair<br>Styles</a></li>
            <li class=""><a href="#" class="">About</a></li>
            <li class=""><a href="#" class="">Contact</a></li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>

    <div id="contents">

        <div class="jumbotron">
              <h4>We bring out your beauty...</h4>
              <h6>Set an appointment</h6>
              <p><a class="btn btn-lg" href="tel:5671234009" role="button"><span class="glyphicon glyphicon-earphone"></span>567-1234-009</a></p>
        </div> <!-- End Jumbotron -->

        <div id="featured">

        </div> <!-- #featured -->

    </div> <!-- #contents -->

    <div id="footer">

    </div> <!-- #footer -->

    <script src="js/jquery-2.1.4.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

    <!-- <script src="js/main.js"></script> -->


</body>

and here is the CSS:

/** {
margin: 0;
}*/

body {
    font-family: 'Alice', serif;
}

/****************** Nav Section ************************/

nav#header {
    background:url('../images/header.png') no-repeat;
    /*min-height:200px;*/
    color:#fff;
    margin-bottom:0;
}

#logo {
    width: 300px;
    height:150px;
}

#navmenu {
    margin:0px 120px 0 0;
    color: #fff;
}


ul.nav.navbar-nav.navbar-right li {
    background-color: #301b14;
    height:180px;
    font-weight: bold;
    text-transform: uppercase;
    margin:10px;
    border-radius: 5px;
    text-align: center;
}
ul.nav.navbar-nav.navbar-right li a {
    color: #fff;
    font-weight: bold;
    text-transform: uppercase;
    position: relative;
    top: 35%;
    left: 0;
    padding-top: 5px;
}

ul.nav.navbar-nav.navbar-right li.active {
    color: #301b14;
    background-color: #e4dfc1;
    border-radius: 5px;
}

ul.nav.navbar-nav.navbar-right li.active a {
    color: #301b14;
    background-color: #e4dfc1;
    border-radius: 5px;
}

ul.nav.navbar-nav.navbar-right li:hover {
    color: #301b14;
    background-color: #e4dfc1;
    border-radius: 5px;
}

ul.nav.navbar-nav.navbar-right li a:hover {
    color: #301b14;
    background-color: #e4dfc1;
    border-radius: 5px;
}

/****************** End Nav Section ************************/

/****************** Content Section ************************/

.jumbotron {
    letter-spacing: 2px;
    background: url('../images/jumbo-1000.jpeg') no-repeat center;
    height:559px;
    margin:0;
    border-top: 10px solid rgba(48,27,20,0.9);
    border-bottom: 10px solid rgba(48,27,20,0.9);
}

etc...
javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

Since you have specified the following:

#header {
  height: 200px;
}

If you want to ensure that your #header section is at least 200px in height, you can use this instead:

#header {
  min-height: 200px;
}

Code Snippet

* {
  margin: 0;
}
body {
  font-family: 'Alice', serif;
}
#header {
  min-height: 200px;
}
#logo {
  width: 300px;
  height: 150px;
}
#navmenu {
  margin: 30px 120px 0 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav id="header" class="navbar navbar-default">
  <div class="container">
    <!-- 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="#navmenu" aria-expanded="false" aria-controls="navmenu">
        <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="#">
        <img id="logo" src="images/art-of-hair.png">
      </a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div id="navmenu" class="collapse navbar-collapse navbar-right">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home<span class="sr-only">Home</span></a>
        </li>
        <li><a href="#">Hair Styles</a>
        </li>
        <li class=""><a href="#" class="">About</a>
        </li>
        <li class=""><a href="#" class="">Contact</a>
        </li>
      </ul>


    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
</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

Error Handling with PHP's die() Command

There seems to be an issue that I am facing with the die() commands. On my website, I have a member registration page which includes a form. The form's action leads to another PHP script. However, when the form is submitted, instead of displaying an a ...

phpjquery

What is the best way to create space between floated elements and a cleared element?

I have a webpage with various floated boxes and a footer positioned at the bottom. The issue arises when trying to create space between the boxes and the footer without using margins. #main { max-width: 700px; margin: 0 auto; } .box { width: 46.6 ...

css

Syntax for chained arrow functions

const retrieveData = link => dispatcher => { // ... } export const fetchInfo = searchTerm => (dispatcher) => { return dispatcher(retrieveData(searchTerm)); }; What role does dispatcher play in the retrieveData function? Is link the only p ...

javascriptreactjs

`JQuery fadeOut seems to have a limitation where it only applies to the

I have a group of divs, each containing an anchor tag that triggers a JavaScript function (which uses AJAX to delete a row from a table). Here's an example setup: <div id="container"> <div><a id="btn" onclick="deleteRow()">Delet ...

javascriptjqueryhtmlcssajax

Experiencing problems with integrating Slim framework and AngularJS, such as encountering a 404 error

Although this may seem like a repeat question, I am encountering an issue with using AngularJS with Slim Framework web services. I have set up a webservice to retrieve a student record with a URL structure like: http://www.slim.local/api/getstudent/1 ...

javascriptphpangularjsslim

Tips for testing "defineAsyncComponent" in Vue 3:

Suppose I need to unit test this utility function. I am utilizing Vue 3, however, this code resides in a "regular" JavaScript file rather than an SFC. How can I go about doing that? function getDynamicComponent() { if (...) { return defineAsyncComp ...

javascriptvue.jsunit-testingjestjsvuejs3

Choose all elements with a specific class name without the need to specify their position in the list

I'm working on adding a function to my WordPress site that will allow me to show/hide page elements with a specific class. For example, I want any elements (such as rows, containers, and text blocks) that have the 'show-hide' class to be hid ...

javascriptgetelementsbyclassname

The Typescript compiler is unable to locate the module './lib'

I'm currently integrating the winston-aws-cloudwatch library into my TypeScript server-side application. If you want to replicate the issue, I have provided a SSCCE setup on GitHub. Here are the details: index.ts import logger from './logger& ...

javascripttypescripttsc

Labels are overlapping each other and being aligned to the right side

Working with the most up-to-date version of Bootstrap, I am currently designing a search bar featuring a dropdown menu preceding the search button. Upon clicking the dropdown, various controls are revealed. Below is the HTML code for this configuration: ...

htmlcsstwitter-bootstrap

What could be causing "Unknown property" errors when using unicode property escapes?

The MDN website provides examples of matching patterns with unicode support, such as: const sentence = 'A ticket to 大阪 costs ¥2000 ...

javascriptregexnext.jsunicode-escapes

Drag a dropdown menu to the bottom left corner and set it to full width on mobile using CSS

Check out this code snippet with CSS and HTML: CSS .flyout { position: absolute; top: 30px; right: 15px; background-color: #FFF; padding: 20px; border: 1px solid #eaeaea; z-index: 999; width: 400px; border-top: 3px solid #337AB7; disp ...

jqueryhtmlcsstwitter-bootstrap

Attempting to link two JavaScript files, however, only one of them is functioning correctly

I'm currently experiencing an issue with my HTML page that involves calling two JS files for two different image sliders on the same website page. One slider works perfectly fine while the other does not. I'm confused as to whether it's perm ...

javascripthtmlcss

Searching for the way to access the values of a nested object's ref in Vue JS?

Within my Vue data object, I store a reference to a structure called Plot. It has properties for length, width, and acreage. interface Plot { length: number, width: number, acreage: number } const model = { plot: ref<Plot[]>([]), }) When fe ...

javascriptvue.jsvue-reactivity

Generating a list of values separated by commas from a Microsoft Excel column after applying regular expressions

I have an Excel column that I need to convert into CSV format. A JavaScript regex has been provided to apply on the column values: var regex = new RegExp("[^a-z0-9',.]+","gi"); return input.replace(regex, "_").replace(/_+/g, "_").replace(/^_|_$|^&bso ...

javascriptphpregexexcelcsv

Using two variables as parameters in an AJAX URL within a Laravel route

Having an issue where my ajax request fails when using two parameters in the url. --- AJAX--- url: "/post/"+post_id+"/"+vote, --- ROUTE --- Route::get('/post/{id}/{up_or_down_vote} However, if I only use one parameter: --- AJAX-- ...

phpjqueryajaxlaravel

Position an element in the middle of the range between the tallest and shortest characters

Is there a way to vertically center an element between the tallest and shortest characters of another element (preferably using just CSS, but JavaScript is also acceptable)? I want it to be aligned with the actual text content rather than the line height, ...

javascripthtmlcsslayout

ToggleClass is not being applied to every single div

I am currently designing a pricing table with hover effects. You can view the progress here: Upon hovering on a pricing table, all the divs are toggling classes which is not the desired behavior. I want each element to have its own separate interaction. ...

javascriptjqueryhtmlcss

Creating a custom navigation bar that elegantly fades away with a smooth animation as you scroll down the page is a must-have

How can I create a navigation bar that disappears when scrolling, with a smooth animation? This is the progress I have made so far. HTML: <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="css/style.css" type="tex ...

javascriptjqueryhtmlcssnavigation

Using Node.js for a game loop provides a more accurate alternative to setInterval

In my current setup, I have a multiplayer game that utilizes sockets for asynchronous data transfer. The game features a game loop that should tick every 500ms to handle player updates such as position and appearance. var self = this; this.gameLoop = se ...

javascriptnode.jstimergame-loop

Can you explain the distinction between using get() and valueChanges() in an Angular Firestore query?

Can someone help clarify the distinction between get() and valueChanges() when executing a query in Angular Firestore? Are there specific advantages or disadvantages to consider, such as differences in reads or costs? ...

javascriptangulartypescriptfirebasegoogle-cloud-firestore