Adjust Navbar Header Color Based on Screen Size

Question

Adjust Navbar Header Color Based on Screen Size

I am completely new to front-end development. I am in the process of building my own responsive website using Bootstrap 3.

One issue I am facing is that when I resize my browser window to simulate a phone screen, I want the navigation bar color to change to white upon clicking the Menu Icon.

Currently, the header stays transparent on page load and changes to white while scrolling, as intended. However, when I click the hamburger menu icon, the collapsible nav header drops down with the menu items but the background remains transparent, causing the menu items to overlap the content below.

I have attempted to write a script to address this issue, but it doesn't seem to be working. Can anyone provide any suggestions?

<script>
    var windowsize = $(window).width();
    $(window).resize(function() {
        windowsize = $(window).width();
            if (windowsize < 440) {
                $("#myNavbar").click(function () {
                  $(".navbar-header").css({"background-color": "#ffffff", "-webkit-box-shadow": "0px 1px 4px 0px rgba(180, 180, 180, 0.5)", "-moz-box-shadow": "0px 1px 4px 0px rgba(180,180,180, 0.5)", "box-shadow": "0px 1px 4px 0px rgba(180,180,180, 0.5)"});
                });
            };
      });
</script>

javascript jquery html css twitter-bootstrap

Answer 1

Answer №1

To achieve the desired outcome, incorporate Media Queries into your CSS file.

@media screen and (max-width: 300px) {
    nav {
        background-color: #ffffff;
    }
}

Answer 2

To achieve the desired outcome, incorporate Media Queries into your CSS file.

@media screen and (max-width: 300px) {
    nav {
        background-color: #ffffff;
    }
}

Answer 3

Answer №2

By implementing a click event to change the color, there is no need for a window resize function.

<script>
    $("#myNavbar").click(function () {
        windowsize = $(window).width();

        if (windowsize < 440) {
            $(".navbar-header").css({"background-color": "#ffffff", "-webkit-box-shadow": "0px 1px 4px 0px rgba(180, 180, 180, 0.5)", "-moz-box-shadow": "0px 1px 4px 0px rgba(180,180,180, 0.5)", "box-shadow": "0px 1px 4px 0px rgba(180,180,180, 0.5)"});
        }
    });

</script>

To make the CSS dynamic, it would be recommended to use a class. Adjusting the JS code to

$(".navbar-header").addClass("active");

allows you to define the active class in your CSS files.

Answer 4

By implementing a click event to change the color, there is no need for a window resize function.

<script>
    $("#myNavbar").click(function () {
        windowsize = $(window).width();

        if (windowsize < 440) {
            $(".navbar-header").css({"background-color": "#ffffff", "-webkit-box-shadow": "0px 1px 4px 0px rgba(180, 180, 180, 0.5)", "-moz-box-shadow": "0px 1px 4px 0px rgba(180,180,180, 0.5)", "box-shadow": "0px 1px 4px 0px rgba(180,180,180, 0.5)"});
        }
    });

</script>

To make the CSS dynamic, it would be recommended to use a class. Adjusting the JS code to

$(".navbar-header").addClass("active");

allows you to define the active class in your CSS files.

Answer 5

Answer №3

Utilizing media queries is an effective method to ensure that CSS properties adapt based on the screen size.

If you're looking for code that fits your requirements, consider the following:

.header-section {
    @media only screen and (max-width: 760px) {font-size: 16px;}
}

This example adjusts the font size of the header section when the screen width is 760px or below.

Answer 6

Utilizing media queries is an effective method to ensure that CSS properties adapt based on the screen size.

If you're looking for code that fits your requirements, consider the following:

.header-section {
    @media only screen and (max-width: 760px) {font-size: 16px;}
}

This example adjusts the font size of the header section when the screen width is 760px or below.

Answer 7

Answer №4

To achieve this effect, I would use a combination of JavaScript and CSS media query.

JavaScript:

$("#myNavbar").click(function() {
    $(".navbar-header").toggleClass('.active-nav')
});

CSS:

@media only screen and (min-width:440px) {
    .navbar-header.active-nav {
        background-color: #ffffff;
        -webkit-box-shadow: 0px 1px 4px 0px rgba(180, 180, 180, 0.5);
        -moz-box-shadow: 0px 1px 4px 0px rgba(180, 180, 180, 0.5);
        box-shadow: 0px 1px 4px 0px rgba(180, 180, 180, 0.5);
    }
}

Answer 8

To achieve this effect, I would use a combination of JavaScript and CSS media query.

JavaScript:

$("#myNavbar").click(function() {
    $(".navbar-header").toggleClass('.active-nav')
});

CSS:

@media only screen and (min-width:440px) {
    .navbar-header.active-nav {
        background-color: #ffffff;
        -webkit-box-shadow: 0px 1px 4px 0px rgba(180, 180, 180, 0.5);
        -moz-box-shadow: 0px 1px 4px 0px rgba(180, 180, 180, 0.5);
        box-shadow: 0px 1px 4px 0px rgba(180, 180, 180, 0.5);
    }
}

Answer 9

Answer №5

Here is a helpful tip for you:

$("#myNavbar").click(function () {
  $(".navbar-header").addClass("navbar-header-mobile");
});

/* For Extra Small Devices like Phones */ 
@media only screen and (min-width : 480px) {
  .navbar-header-mobile {
    background-color: #ffffff;
    -webkit-box-shadow: 0px 1px 4px 0px rgba(180, 180, 180, 0.5);
    -moz-box-shadow: 0px 1px 4px 0px rgba(180,180,180, 0.5);
    box-shadow: 0px 1px 4px 0px rgba(180,180,180, 0.5);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

If you want, you can also add code to remove it on the phone.

Answer 10

Here is a helpful tip for you:

$("#myNavbar").click(function () {
  $(".navbar-header").addClass("navbar-header-mobile");
});

/* For Extra Small Devices like Phones */ 
@media only screen and (min-width : 480px) {
  .navbar-header-mobile {
    background-color: #ffffff;
    -webkit-box-shadow: 0px 1px 4px 0px rgba(180, 180, 180, 0.5);
    -moz-box-shadow: 0px 1px 4px 0px rgba(180,180,180, 0.5);
    box-shadow: 0px 1px 4px 0px rgba(180,180,180, 0.5);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

If you want, you can also add code to remove it on the phone.

Answer 11

Answer №6

Resolved the issue by making changes not only to the header color, but also to the collapsible menu background. I applied a similar logic used for the header color change to capture the click function of the collapsible navigation bar and toggle the colors accordingly. Here is the finalized code snippet:

<script>
  $(function (){
    $(".navbar-toggle").click(function() {
        if ($(window).width() < 440) {
            $(".navbar-collapse").toggleClass("menuActive");
            $(".navbar-header").toggleClass("menuActive");
        } 
    });
  }); 
</script>

Answer 12

Resolved the issue by making changes not only to the header color, but also to the collapsible menu background. I applied a similar logic used for the header color change to capture the click function of the collapsible navigation bar and toggle the colors accordingly. Here is the finalized code snippet:

<script>
  $(function (){
    $(".navbar-toggle").click(function() {
        if ($(window).width() < 440) {
            $(".navbar-collapse").toggleClass("menuActive");
            $(".navbar-header").toggleClass("menuActive");
        } 
    });
  }); 
</script>

Answer 13

Answer №7

When the screen resolution is less than 440, clicking on the navbar will change its color to white:

<script>
      $('.navbar').click(function() {
           $(this).toggleClass('open');
      });
</script>

@media only screen and (max-width: 440px) {
    .navbar.open {
      background-color: #ffffff;
      -webkit-box-shadow: 0px 1px 4px 0px rgba(180, 180, 180, 0.5);
      -moz-box-shadow: 0px 1px 4px 0px rgba(180,180,180, 0.5);
      box-shadow: 0px 1px 4px 0px rgba(180,180,180, 0.5);
    }
}

<div class="navbar"></div>

Answer 14

When the screen resolution is less than 440, clicking on the navbar will change its color to white:

<script>
      $('.navbar').click(function() {
           $(this).toggleClass('open');
      });
</script>

@media only screen and (max-width: 440px) {
    .navbar.open {
      background-color: #ffffff;
      -webkit-box-shadow: 0px 1px 4px 0px rgba(180, 180, 180, 0.5);
      -moz-box-shadow: 0px 1px 4px 0px rgba(180,180,180, 0.5);
      box-shadow: 0px 1px 4px 0px rgba(180,180,180, 0.5);
    }
}

<div class="navbar"></div>

Adjust Navbar Header Color Based on Screen Size

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Similar questions

Creating a dynamic directive in AngularJS: Learn how to add or remove it from the DOM based on specific conditions

Included Image Hyperlink with Limited Clickability in HTML

What could be causing the show button to change its style every time I click it?

Encountering issues with importing a module from a .ts file

Interval function not initiating properly post bullet navigation activation

Unable to invoke a custom hook within another custom hook in a React application

Express server is receiving undefined post parameters from Axios in Vue, even though they are clearly defined in Vue

Issue: [ng:areq] The parameter 'PieController' is not properly defined, it is currently undefined

Issues persist while attempting to save sass (.scss) files using Atom on a Mac

Issue with Jquery live event not triggering after successful execution

How can I eliminate the tiny white square located beneath the scrollbar track?

What is the best way to import JSON functionality into Javascript specifically for use with Internet Explorer

JavaScript and jQuery validation issues persisting

The Table and Div elements do not have identical widths when set to 100%

Navigate to the chosen item in material-ui scroll bar

Utilizing Snowpack to implement private class methods in JavaScript

What are the steps for releasing a Next.js app as an npm package?

How to Align Navigation Searchbar in Center When Bootstrap is Collapsed

Colored stripe on a horizontal menu

The screen reader seems to be malfunctioning as soon as I include this particular code