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.

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

Is it possible to create a single CSS style class that can be used for various section tiles on a website?

I am currently working on a website that includes different section titles such as About, Projects, Contact, and more. To make these titles stand out against the background image, I have decided to fill them with white. The text color of the titles is dar ...

htmlcss

A guide on implementing a .click function with jQuery

I have a code snippet that is supposed to add 100 to a number in a MySQL table when a button is clicked. However, the code does not work as expected. When I click the button, nothing happens, but if I refresh the page, it adds 100 to the number. Can some ...

javascriptphpjqueryhtmlcss

Maximizing CSS opacity for optimal performance in image fading

I'm working on creating a smooth fade in-out effect for the images in my photo gallery by adjusting the CSS opacity value using JavaScript. However, I've noticed that this process is quite sluggish on certain computers, such as my relatively new ...

javascriptcsshtmlcanvas

Can a Textmate snippet be activated using a Regex pattern instead of just a specific character?

Hey there, I've been spending a lot of time working with CSS recently, and I have to admit that constantly typing "px" after every width, height, margin, etc., is starting to get on my nerves. I find myself refining pixel values in Firebug quite ofte ...

cssregextextmatetextmatebundles

Issues with 'floating' unordered lists

.menu li { float: left; color: #fff; font-weight: bold; } .menu li a { display: block; height: 20px; min-width: 110px; text-decoration: none; border-radius: 3px; padding: 4px; padding-left: 6px; padding-right: 6p ...

css

Maintain the layout of HTML page while reducing the window size

My webpage is experiencing an issue. When I resize the window, the placement of all elements becomes misaligned and the layout gets distorted. ...

htmlcsswindowpositionminimized

Creating a stunning image reveal animation using GSAP and clip-path within a React environment

When attempting to create an animation for revealing an image using GSAP and the clip-path property within a Component, I encountered an issue. The animation works perfectly when using the first clip-path value, but as soon as I switch to the other one, th ...

cssreactjsgsapclip-path

Efficiently adjust the width of a child div to automatically fit within

I stumbled upon this fascinating jsfiddle on this website that almost completely addresses my concern, solving up to 90% of it. Check out the JSFiddle Nevertheless, I am keen to incorporate margins within the inner divs. Despite attempting to modify the ...

jqueryhtmlcss

What is the process for placing a component on the right side of the sidebar?

Here is the code snippet I am working with: <template> <div class="main"> <sidebar /> <router-view /> </div> </template> The sidebar has a width of 260px. I need to ensure that any comp ...

cssvue.js

As you scroll, the opacity gradually increases, creating a dynamic visual

Struggling to replicate a feature on a website where images gain opacity as you scroll down? Check out this site for reference: . While my current code somewhat achieves this effect, I'm having trouble figuring out how to apply a darker opacity gradua ...

javascriptjquerycssif-statementscroll

The performance of the animation on http://responsive-nav.com/ becomes erratic when viewed on Android devices

Recently, I came across a fantastic plugin that works perfectly on regular computer browsers. However, when I tested it on my android phone, the css3 animation for the dropdown appeared choppy and seemed to be dropping frames. Does anyone have suggestions ...

javascriptcssplugins

Edge and Internet Explorer fail to recognize the :focus CSS selector

I am utilizing CSS to make our placeholders jump up when clicked inside, but Edge is not recognizing the CSS. It works fine on every other browser except for Edge. I've tried various solutions but none seem to work on Edge. Any thoughts on what might ...

cssinternet-explorerfocusmicrosoft-edge

use jquery to highlight a table row based on the current hour

Within my HTML structure, there is a table element with the class <table class="model">, and it contains several table data cells with the class class="model-date". The date format within these cells is as follows: DD-MM HH:MM For example, <td ...

jqueryhtmlcss

Connecting two fields with a line on click in AngularJS

In the top section, there are 10 fields and in the bottom section, there are another 10 fields. I want to be able to connect two fields with a line when they are clicked (one from the top section and one from the bottom section). This connection should app ...

javascripthtmljquerycssangularjs

Scrolling the inner container in a CSS flexbox layout: tips and tricks

I'm currently working on designing a flex box based HTML layout like the one shown in the image link provided below. https://i.stack.imgur.com/nBl6N.png The layout should consist of 3 rows within the viewport with the following structure: - top: " ...

htmlcssflexbox

What is the best way to position a small image within a menu?

Is there a way to adjust the position of the arrow image within the <li> element without affecting the layout of the unordered list? Below is the code snippet for reference: body { margin: 0; padding: 0; } nav { width: 100%; background: # ...

htmlcssimagenav

Prevent clicking until the IE 10 and 9 windows have fully loaded

My goal is to prevent clicking on an image element until all the resources have finished loading, enabling the click only after the window.load() or when document.readystate reaches complete status. While this code works well in Chrome and Safari, I am fac ...

jquerycssinternet-explorerclickpointer-events

Creating visually appealing websites is made easy with Bootstrap 5's innovative image and

I am working on a Bootstrap 5 website template and I want to add text with a white background in the center of an image. Instead of seeing just a white color over the image, I would like to have a white rectangle with a title and text centered on the imag ...

htmlcsstwitter-bootstrapbootstrap-5

What is the best way to incorporate both images and text in PHP code?

I'm currently working on creating a large image call-to-action (CTA) for my new WordPress website. I've set up a new field group with the type "group" in ACF, and added some functions in PHPStorm. However, none of my images, text, or links are ap ...

javascriptphpcsswordpressadvanced-custom-fields

Determining the width of an element in terms of percentage

My issue involves input elements with widths set as percentages in CSS under the common class 'display-class' For example: input.test1 { width: 60% } In JavaScript, I am attempting to wrap a div around these input fields with the same width ...

javascriptcssdom