Step-by-step guide on creating a unique Bootstrap Nav overlay effect

Question

Step-by-step guide on creating a unique Bootstrap Nav overlay effect

My Bootstrap navigation bar is functioning properly

However, I am facing an issue in adding an overlay to the NAV menu on mobile screens

I am using Bootstrap and Umbraco 7

<nav class="navbar navbar-fixed-top navbar-default" role="navigation">

    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

            @foreach (var item in selection)
            {
                <span class="icon-bar" style="background-color: @item.GetPropertyValue("navLinkColor")"></span>
            }

        </button>

        @Html.Partial("Shared/Logo")

    </div>

    <div class="navbar-collapse collapse">

        @Html.Partial("Shared/MainNav")

        @Html.Partial("Shared/Links")

    </div>
</nav>

The code above works perfectly on full Desktop screens - But how can I achieve a collapse overlay effect similar to the image attached?

https://i.sstatic.net/GNNY5.jpg.

javascript css html umbraco bootstrap-4

Answer 1

Answer №1

To create a responsive design, it is recommended to utilize @media queries specifying the maximum width for mobile menu display and minimum width for desktop view.

Find more information about Bootstrap responsive breakpoints here.

 // Targeting different screen sizes using media queries
    // Extra small devices (portrait phones, less than 576px)
    // Default in Bootstrap

    // Small devices (landscape phones, 576px and up)
    @media (min-width: 576px) { ... }

    // Medium devices (tablets, 768px and up)
    @media (min-width: 768px) { ... }

    // Large devices (desktops, 992px and up)
    @media (min-width: 992px) { ... }

    // Extra large devices (large desktops, 1200px and up)
    @media (min-width: 1200px) { ... }

An alternative approach would be utilizing Sass:

@include media-breakpoint-up(xs) { ... }
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

// Example application:
@include media-breakpoint-up(sm) {
  .some-class {
    display: block;
  }
}

Answer 2

To create a responsive design, it is recommended to utilize @media queries specifying the maximum width for mobile menu display and minimum width for desktop view.

Find more information about Bootstrap responsive breakpoints here.

 // Targeting different screen sizes using media queries
    // Extra small devices (portrait phones, less than 576px)
    // Default in Bootstrap

    // Small devices (landscape phones, 576px and up)
    @media (min-width: 576px) { ... }

    // Medium devices (tablets, 768px and up)
    @media (min-width: 768px) { ... }

    // Large devices (desktops, 992px and up)
    @media (min-width: 992px) { ... }

    // Extra large devices (large desktops, 1200px and up)
    @media (min-width: 1200px) { ... }

An alternative approach would be utilizing Sass:

@include media-breakpoint-up(xs) { ... }
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

// Example application:
@include media-breakpoint-up(sm) {
  .some-class {
    display: block;
  }
}

Step-by-step guide on creating a unique Bootstrap Nav overlay effect

Answer №1

Similar questions

Having trouble retrieving JSON data from an Ajax POST request in PHP

PL/SQL Process in Oracle APEX fails to respond when triggered via AJAX before the page unloads

"Dealing with Angular .map() function returning an empty array or displaying error messages

Turning the Three.js camera to the left and right side

What is the best way to achieve a stylish Bootstrap modal design with a blurred and transparent header, as well as a left sidebar that seamlessly blends into

Why is the lower right white space left unfilled by the color red?

Is it possible to bind HTML within an AngularJS partial but encountering an inexplicable issue?

Displaying Mustache.js in an HTML template

Is it possible for PHP to dynamically load a file based on a condition set in JavaScript?

Pressing the enter key in the input field will cause the multistep progress bar to update its

Technique for updating URL when submitting a form on a webpage

The performance of aframe is being affected by the use of bounding boxes for collision

After submitting the comment, you will be redirected to a different page

Asynchronous callback in mongoose with an undefined value

Incorporate additional information into the current data series within Lightning Chart

Neglecting an error from a completed function in Node JS

Using angular.copy function to copy an array with a custom property

Is it possible to retain the placeholder text if the user selects the input field and the value is left empty?

Upon the completion of the Vue component, all subsequent elements are automatically removed

Introducing the new "Expand/Collapse" feature - enhancing the way content placement functions!