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

What is the reason behind TypeScript rejecting the syntax of checkbox input elements?

When trying to use the following checkbox in TypeScript, I encountered a warning: <input type="checkbox" onClick={(event: React.MouseEvent<HTMLInputElement>) => { setIsTOSAccepted(event.target.checked); }} defaultChecked={ ...

htmlreactjstypescript

Resizing background images to their original size using jQuery

Can anyone help me figure out the actual size in pixels of a background image that is being displayed? <style> body { background-image: url(background.jpg); background-size: contain; } </style> I tried using jQuery to get the size of ...

jquerycssbackgroundsize

Enhance your JQuery skills by implementing variables within the .css() function

Attempting to randomly assign values to an image's left and right properties using JQuery. Here is the code snippet: var sides = ["left", "right"] var currentSide = sides[Math.floor(Math.random() * sides.length)]; $("#"+currentImage).css({currentSide ...

javascriptjquerycss

Table for maximizing space within a cell (Internet Explorer 8)

I am attempting to make the "innerTable" fill up all available space within another table. The issue is with IE8 (no compatibility mode, IE8 browser mode, Doc mode IE8 Standards). The table does not expand to fit the containing TD. I tried enclosing the ta ...

htmlcsshtml-tableinternet-explorer-8

Eliminate the ending slash from your Nuxt application

Hello, I am currently working on a Nuxt Application and encountering an issue. After running the npm run build command and starting it with npm start, there seems to be an inconsistency with trailing slashes. During the build, the URL appears without a t ...

javascriptvue.jsnuxt.js

How can images from a dynamic table be converted to base64 format in Vue.js and then sent in a JSON file?

Hello everyone, I'm facing an issue with a dynamic table where I need to add multiple rows, each containing a different image. I attempted to convert these images to base64 format and save them in a JSON file along with the table data. However, the pr ...

javascripthtmlvue.jshtml-tablevuetify.js

Is it possible to execute a URL twice instead of just once in AngularJS?

While developing a web application with AngularJS and Rest Web services, I encountered a problem where the URL is being executed twice instead of just once. I have created a service function for executing the web service API and calling it from the control ...

javascriptphpangularjslaravel-5

Tips on locating information within a pre-existing GET array with parameters provided

Apologies for the unclear title. I am currently utilizing a category chooser that pulls categories from an API. The process involves fetching a list of categories, filtering out their names, and presenting them in the category chooser. Upon clicking submit ...

javascriptjqueryarraysjsonapi

Customizing a material-ui theme with withStyles() in conjunction with withTheme()

After developing a series of reusable components, I started styling them by utilizing classes prop to override the MUI classnames. To streamline the process and prevent repetition in more intricate components, I consolidated common styles into a theme. Eac ...

cssreactjstabsthemesmaterial-ui

How can I retrieve the input value on the current page using PHP?

Hey there, so I'm pretty new to PHP and I have a question. Is it possible to retrieve the input value from an existing input field on a page using PHP when the page loads, and then assign that value to a variable? For instance, let's say I have ...

javascriptphpjqueryhtml

Design a styled rectangular tab using CSS

Does anyone know of any cool CSS techniques for achieving the tabbed rectangle appearance depicted in the image below? While it's clear that accomplishing this with just one div is not possible, is there a more efficient method than layering one div ...

csstabs

Maintain the fixed placement of an absolute element by adjusting the browser window size

Seeking assistance here - I currently have a box that occupies the entire window. This box is designed to be responsive with a noticeable red border. Within this box, my goal is to insert tables with specific X and Y coordinates. However, my issue arises ...

htmlcss

What is the best way to retrieve location data in a React application?

In my React project, I am trying to retrieve location information using the Geolocation API. To accomplish this task, I have included a button in the code below: import React, { Component } from 'react' class App extends Component { construc ...

javascriptreactjs

Menu toggle vanishes suddenly

Whenever I click the toggle button, I notice that the menu (which I have set to appear on toggle) only shows for a brief moment before disappearing. As a beginner in bootstrap, I am sure I might have made some obvious mistakes. Any assistance would be gr ...

javascripthtmlcssbootstrap-4

The last row may not always be selected by tr:last

Encountering a strange issue when using the tr:last command in jquery. I created a dynamic table based on clones of a template row. When adding a new row, I need to increment the row count to name the fields. However, since rows can also be deleted, the ...

jquery

JavaScript is proving to be uncooperative in allowing me to modify the

Despite searching through previously asked questions, I have been unable to find a solution to my issue. I am struggling with changing an image source upon clicking the image itself. The following is a snippet of my HTML code: <img id="picture1" oncli ...

javascripthtml

Fetching the second item within an object using JavaScript

I am trying to retrieve the data from the last month of an API, but I want to avoid hard-coding the date like this: const data = [data.data['Monthly Time Series']['2021-11-30']]. I need a way to dynamically access the 2nd object without ...

javascriptapiobject

Internet Explorer (on mobile devices) does not display submenus when touched

Hello, I have a query about displaying a sublist on touch. I have created a sublist that is supposed to show up when you hover over it. You can view the demo here: @import url(//fonts.googleapis.com/css?family=Titillium+Web:400,200,300,600,700); body { ...

javascriptjqueryhtmlcss

Show a persistent header once you scroll past a certain point using Bootstrap

Utilizing Bootstrap affix property to reveal a header after scrolling down by 100px has been successful for me. However, I encountered an issue when trying to set the opacity property to 0.0001, it works as expected. But when setting it to 0 or changing di ...

javascripthtmlcsstwitter-bootstrap

JavaScript has thrown an error stating that the function in my jQuery script is undefined

I encountered an issue Uncaught TypeError: undefined is not a function in my jQuery script. Here is the code snippet: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link re ...

javascriptjqueryhtmltwitter-bootstrap