Ways to create a downward expanding navigation menu when collapsed

Trying to accomplish the following, please refer to the image below. I am looking to have the yellow bar extend down when the collapsed menu is open. Currently, the navigation links are hidden behind the logo as shown in the second image below.

https://i.sstatic.net/KdT30.jpg https://i.sstatic.net/bqEeP.jpg

Is there a way to make the yellow bar extend when the collapsed menu is clicked/opened? Any help is appreciated

Here's my code:

body {
  margin-top: 60px; 
}

.navbar .nav-link {
  font-size: 14px;
  text-transform: uppercase;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

.navbar .nav-item.active {
  border-left: #fff 3px solid;
}

.navbar-brand {                
  position: absolute;
  top: -60px;
  z-index: 900;
  width: 180px;
  height: 180px;
}

.navbar {
  height: 5rem !important;
}

.navbar-stripes {
  height: 1rem;
}

nav h1 {
  font-family: 'Staatliches', cursive;
  position: relative;
  left: 200px;
  top: 5px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp"
    crossorigin="anonymous">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
    crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css?family=Staatliches" rel="stylesheet">
  <link rel="stylesheet" href="css/style.css">
  <title>Brisol Futsal Club</title>
</head>

<body>
  <div class="bg-primary navbar-stripes"></div>
  <nav class="navbar navbar-expand-md navbar-light bg-warning">
    <div class="container">
      <a href="index.html" class="navbar-brand">
        <img src="https://i.imgur.com/1c8K4fu.png" alt="" class="img-fluid">
      </a>
      <div class="row">
        <h1 class="text-white d-none d-lg-block">Brisol Futsal Club</h1>
      </div>
      <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarCollapse">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item active">
            <a href="index.html" class="nav-link">Home</a>
          </li>
          <li class="nav-item">
            <a href="about.html" class="nav-link">About Us</a>
          </li>
          <li class="nav-item">
            <a href="players.html" class="nav-link">Players</a>
          </li>
          <li class="nav-item">
            <a href="sponsors.html" class="nav-link">Sponsors</a>
          </li>
          <li class="nav-item">
            <a href="contact.html" class="nav-link">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <div class="bg-success navbar-stripes"></div>

  
</body>

</html>

cssbootstrap-4

Answer №1

Get rid of the defined height for .navbar in your CSS and instead, add a margin-top property to the .navbar-nav class to make it function properly.

 @media only screen and (max-width: 767px) {
      .navbar-nav{
        margin-top:80px;
       }
    }

Try out the code snippet below:

body {
  margin-top: 60px; 
}

.navbar .nav-link {
  font-size: 14px;
  text-transform: uppercase;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

.navbar .nav-item.active {
  border-left: #fff 3px solid;
}

.navbar-brand {                
  position: absolute;
  top: -60px;
  z-index: 900;
  width: 180px;
  height: 180px;
}
@media only screen and (max-width: 767px) {
  .navbar-nav{
  margin-top:80px;
}
}

/*.navbar {
  height: 5rem !important;
}*/

.navbar-stripes {
  height: 1rem;
}

nav h1 {
  font-family: 'Staatliches', cursive;
  position: relative;
  left: 200px;
  top: 5px;
}
<script src="http://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<body>
  <div class="bg-primary navbar-stripes"></div>
  <nav class="navbar navbar-expand-md navbar-light bg-warning" >
    <div class="container">
      <a href="index.html" class="navbar-brand">
        <img src="https://i.imgur.com/1c8K4fu.png" alt="" class="img-fluid">
      </a>
      <div class="row">
        <h1 class="text-white d-none d-lg-block">Brisol Futsal Club</h1>
      </div>
      <button class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarCollapse">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item active">
            <a href="index.html" class="nav-link">Home</a>
          </li>
          <li class="nav-item">
            <a href="about.html" class="nav-link">About Us</a>
          </li>
          <li class="nav-item">
            <a href="players.html" class="nav-link">Players</a>
          </li>
          <li class="nav-item">
            <a href="sponsors.html" class="nav-link">Sponsors</a>
          </li>
          <li class="nav-item">
            <a href="contact.html" class="nav-link">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  
  </nav>
  
  <div class="bg-success navbar-stripes"></div>
  
</body>

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

Tips on automating the process of moving overflowing elements into a dropdown menu

Challenge Description In need of a dynamic navigation bar, I faced the problem of displaying only the first X items on one line and have the remaining items hidden in a "Show more" dropdown. The challenge was to calculate the width of each item accurately ...

javascripthtmlcssreactjs

Guide to turning off the Facebook iframe page plugin

I am facing a challenge with embedding a facebook iframe on my website. I want to disable it once the screen width reaches a specific point, but I am struggling to make the iframe disappear properly. Here is how I have attempted to implement this: window.o ...

javascripthtmlcss

"Optimizing Background Images with IE 8 Stretch Cover in Bootstrap

Page Broken I've searched all over Stack Overflow for a solution to resolve this background image issue. I'm using Bootstrap for the boxes and removed any margins. The problem arises when setting the background as cover; in IE8, it doesn't ...

htmlcssinternet-explorer-8

How can I input text into separate tabs using a specific method?

I've been struggling with this issue for a while now and here's the code I have so far: <html> <head> <script src="http://mihaifrentiu.com/wp-content/themes/mf/js/jquery_1.7.1.min.js" type="text/javascript"></scr ...

javascripthtmlcsstabslogic

After deploying to Firebase, animations suddenly cease to function

After running npm run-script build and deploying my React app to Firebase hosting with firebase deploy, I encountered an issue where my animations stopped working. I'm puzzled as to why this is happening, especially since I've included keyframes ...

javascriptcssnpmweb-deploymentfirebase-hosting

Configuring a Custom Color for the Bootstrap Datetimepicker

Problem I encountered an issue with my projects that are both using the bootstrap-datetimepicker. While one project displays the correct color, as seen here, the other project shows a wrong color, shown here. Below is the HTML code snippet I am working wi ...

htmlcssdatetimepicker

Convert JavaScript code to Google Appscript

Looking for guidance on incorporating Javascript code into my Google Appscript. Here is the code snippet: I have a separate Stylesheet.html file saved. Can someone advise me on how to invoke the functions within the html file? <script> //google. ...

javascripthtmljquerycssgoogle-apps-script

What is the best way to eliminate the blue outline around an image map?

On the landing page, I have a static background image and I've set up a clickable area using an image map. The issue is that when users click on the area, a blue border appears (see image below). I've tried several methods to remove this border b ...

htmlcss

Tips for updating the uib-typeahead array depending on the selected button option

I'm having trouble updating the array used by the uib-typeahead for autocomplete on a search field. My button successfully filters search results by category, such as name, title, education, and expertise. However, I'm struggling to dynamically u ...

angularjsbootstrap-4

The Bootstrap 4 modal is failing to appear on the screen

My design features an image within a centered div, overlaid with a semi-opaque textbox containing an h1 element. I'm trying to implement a Bootstrap 4 modal component that pops up when the h1 is clicked. Despite following various tutorials for creatin ...

csstwitter-bootstrapresponsive-designbootstrap-4

Creating an efficient login system for my website - where do I start?

I've recently started diving into the world of web development, starting with HTML, CSS, and a bit of JavaScript. However, I've hit a roadblock - while I can perform basic styling, I'm struggling to make my projects interactive. My main que ...

javascriptpythonphpcss

The media query fails to start in the browser's mobile display

Instead of just adjusting the browser window size, I utilized Chrome's developer tools to make adjustments. I double-checked that the appropriate meta tags were included in the code: <meta name="viewport" content="width=device-width, initial-scal ...

cssmobilemedia-queries

Is there a way to roll up the background image of the body?

body { background: url(http://andreypokrovskiy.com/image_hosting/boredom/space-bg.jpg) repeat; animation: backdrop_roll linear 100s infinite; } .enemy-animation { position: relative; z-index: 1; animation-direction: alternate; animation-durati ...

htmlcss

Ways to create spacing between property columns in MUI grid fashion

Is there a way to achieve space-between alignment when elements are stacked vertically in MUI Grid instead of using flex? I've come across suggestions involving giving flex:1 and height:100%, but I'm specifically interested in achieving this with ...

cssmaterial-ui

The backgroundImage function is having trouble locating the specified URL path

I'm struggling to set a backgroundImage because it's not recognizing the local path URL. Here is my code snippet: import { makeStyles } from '@material-ui/core/styles'; const loginWrapperStyles = makeStyles(theme => ({ image: { ...

cssreactjsmaterial-ui

Ways to handle <select> change events effectively in materialize css

My attempt at using a basic jquery change listener on a materialize css select dropdown has been unsuccessful. $("#somedropdown").change(function() { alert("Element Changed"); }); 1) Can anyone provide guidance on how to add a listener to ...

javascriptjquerycssmaterialize

Attempting to apply a minimum width to a th element using the min-width property

I'm trying to set a width for the second th element in this table, but it's not working as expected. <th style="min-width: 50px"> Date from </th> Can anyone provide assistance with this issu ...

htmlcss

What methods can I implement to ensure a button illuminates only when correct information is provided?

I have developed a calculator for permutations and combinations. When either permutation or combination is selected, and the required values are entered, I want the calculate button to light up. How can I achieve this without using setInterval in my curren ...

javascripthtmlcssbuttoncalculator

Ways to correct inverted text in live syntax highlighting using javascript

My coding script has a highlighting feature for keywords, but unfortunately, it is causing some unwanted effects like reversing and mixing up the text. I am seeking assistance to fix this issue, whether it be by un-reversing the text, moving the cursor to ...

javascripthtmlcsstextinnerhtml

A guide to filling an irregular shape (such as a star) based on a percentage using CSS in a React project

I am currently working on developing a React component that showcases a rating percentage using a star icon with two different shades. For example, if the input rating is 79%, I want to display a star with 79% of it in gold color and the remaining 21% in ...

cssreactjsmaterial-uifont-awesome