Dynamic header that adjusts to fit window size fluctuations

Question

Dynamic header that adjusts to fit window size fluctuations

I'm currently working on a website and trying to make it responsive by adjusting to changes in the browser window size. I'm having trouble changing the header height based on the window size unlike how it works for my pictures in CSS:

        #logoArea
        {
            width: 15.625%;
            height: auto;
            position: absolute;
            left: 10%;
        }

When I use similar code for the header, it doesn't work as expected:

        #header
        {
            background-color: black;
            width: 100%;
            height: auto;
        }

The height of the header isn't displaying correctly and when inspected, it shows a height of 0px.

I attempted to use jQuery's .resize() as shown below:

        <script>
            $(document).ready(function(){
                $(window).resize(function(){
                    AdjustHeader();
                });
            });
            function AdjustHeader(){
                if (jQuery(window).width() == 1600) {
                    jQuery("#header").height(200);
                } 
                else
                {
                    jQuery("#header").height(150);
                }
            }
        </script>

This was an experimental test to use jQuery to change the header size. I know it's possible with jQuery.

Question Can anyone assist me in adjusting the header size based on browser window size changes, either in CSS or jQuery? Your help would be greatly appreciated.

javascript jquery html css resize

Answer 1

Answer №1

One way to handle this is by utilizing media queries. Check out this Demo

CSS:

@media only screen and (max-width: 1600px) {
    #header {
        height:200px;
    }
}
@media handheld, only screen and (max-width: 940px) {
    #header {
        height:150px;
    }

}

Take a look at the updated version of the Demo

CSS:

#header {
    background: black;
    width: 100%;
    height: auto;
    display:block;       
    -webkit-transition: .2s height linear;
    -moz-transition: .2s height linear;
    -o-transition: .2s height linear;
    transition: .2s height linear;
}

Answer 2

One way to handle this is by utilizing media queries. Check out this Demo

CSS:

@media only screen and (max-width: 1600px) {
    #header {
        height:200px;
    }
}
@media handheld, only screen and (max-width: 940px) {
    #header {
        height:150px;
    }

}

Take a look at the updated version of the Demo

CSS:

#header {
    background: black;
    width: 100%;
    height: auto;
    display:block;       
    -webkit-transition: .2s height linear;
    -moz-transition: .2s height linear;
    -o-transition: .2s height linear;
    transition: .2s height linear;
}

Answer 3

Answer №2

Implement media queries to customize styles for different screen sizes.

Here's a simple example:

@media (max-width: 480px) {
    ...  
}

@media (min-width: 481px) and (max-width: 768px) {
    ... 
}

Answer 4

Implement media queries to customize styles for different screen sizes.

Here's a simple example:

@media (max-width: 480px) {
    ...  
}

@media (min-width: 481px) and (max-width: 768px) {
    ... 
}

Answer 5

Answer №3

Consider implementing a window resize listener using jQuery. This listener will trigger every time the window is resized. Here is an example:

$(window).resize(function(e) {
    var oldWidth = e.old.width;
    var oldHeight = e.old.height;
    var newWidth = $(this).width();
    var newHeight = $(this).height();
    // Add your custom code here
});

Answer 6

Consider implementing a window resize listener using jQuery. This listener will trigger every time the window is resized. Here is an example:

$(window).resize(function(e) {
    var oldWidth = e.old.width;
    var oldHeight = e.old.height;
    var newWidth = $(this).width();
    var newHeight = $(this).height();
    // Add your custom code here
});

Answer 7

Answer №4

If you notice that your header has a height of 0 when inspecting it, it is likely that all of its children are floated.

To reduce the height of your header, you should adjust the height of its children directly. This can be done by following sarbbottam's suggestion and utilizing media queries.

If you are interested in learning more about media queries and their capabilities, be sure to read through this insightful article on CSS-Tricks.

Answer 8

If you notice that your header has a height of 0 when inspecting it, it is likely that all of its children are floated.

To reduce the height of your header, you should adjust the height of its children directly. This can be done by following sarbbottam's suggestion and utilizing media queries.

If you are interested in learning more about media queries and their capabilities, be sure to read through this insightful article on CSS-Tricks.

Dynamic header that adjusts to fit window size fluctuations

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

I am unable to retrieve values from the req.body object in Node.js

React and Express are incompatible due to the error message "TypeError: undefined is not a function

Bootstrap button groups do not support the checking functionality of radio buttons

Multiple columns contained within a span

Struggling to retrieve the data from a RESTful API?

External vendor scripts such as JavaScript and jQuery are not functioning properly after being rendered in a ReactJS environment

Error encountered when sending information to web service repeatedly

I lose my user interface after a series of clicking events

What is the proper way to safely close the pg-promise connection in a node.js environment once all jest tests are completed?

Ensure that Google Tag Manager (GTM) delays the pageview until the SPA URL title is available

Notification continuously appears when clicking outside of Chrome

The sticky table header is being covered by a disabled HTML button, while the active buttons are not visible

Tips for choosing an option in a form using Selenium with JavaScript

Arranging Objects and Arrays by Two Criteria

Refreshing the page is the only way to activate the jQuery function

Is it possible for one AngularJS application to influence another?

A comparison of parent and child components

I encountered an issue while attempting to include Access-Control-Allow-Origin in my WCF library Project

Issues with IE9's CSS hover functionality are causing problems

What is the best way to duplicate a complete row?