Header that remains stable while adjusting to different heights

When the document width is greater than 760px, I have a header with a height of 60px. The body appears just below the header with no issues. However, when the width becomes smaller, the height of the header increases to two lines (120px) causing the body to be partially hidden at the top.

How can this issue be resolved?

Here is the code being used:

.main_header {
    width:100%;
    height:auto !important;
    background-color:#F2F2F2;
    border-bottom:1px solid #CCC;
    position:fixed;
    top:0px;
    z-index:100;
}
.main_body {
    margin:70px auto;
}

Please note that the page is responsive.

css

Answer №1

To customize the margin of .main-body, start by setting it to 120px for all window sizes. Then, you can adjust the margin at a specific width using a media query. It's important to note that when using the CSS shorthand in this way, the top and bottom margins of main-body will be impacted.

<style>
.main_body {
    margin:120px auto;
}

@media(min-width: 761px){
    .main_body {
        margin:70px auto;
    }
}
</style>

For more information on Media Queries, check out the documentation here: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

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

The Bootstrap 4.5 code is not functioning as anticipated

I recently started learning Bootstrap and have been referring to the official documentation. However, I am facing issues with my code even though my folder only contains an index.html file. Link to Visual Studio Code screenshot. <!doctype HTML> < ...

javascripthtmlcssbootstrap-4responsive-design

What is the best way to minimize the number of files being referenced for compilation?

Is there a way to reference less files in my project without including their styling in the final CSS output? @import(reference) filename.less When I try this, it seems to include the styles from filename.less in the final compiled CSS. Is there a better ...

cssless

Convert a solo row into individual columns within a grid format

My goal is to design a grid layout where each row can be divided into columns independently, similar to the example shown below: https://i.stack.imgur.com/VFPFq.png Here's the code snippet I have been experimenting with: .container { position ...

htmlcsscss-grid

Apply a specific style conditionally using Angular's ng-repeat directive

Currently, I am utilizing ng-repeat to iterate through a list of divs and manually adding items to the JSON that is rendering these divs. My goal is to position the last div that I add in the JSON at the location where the mouse cursor is, while keeping th ...

javascriptjqueryhtmlcssangularjs

Tips for adjusting the font size options within the Autocomplete feature of Material UI Version 5

Is there a way to adjust the font size of the drop-down items? I have tried various methods to change the font size, including: How do I change Material UI Autocomplete font size? How to change fontsize of options in Material ui autocomplete? Unfortuna ...

cssreactjsmaterial-uiautocomplete

Develop expandable objects containing a set size of items using HTML and CSS

I need help creating a flexible content area using only HTML/CSS. The width of this area should be able to vary from 0 to 50% within its container, which can itself vary from 0 to 100% of the window size. I have two items that need to be positioned next ...

htmlcssresponsive-design

div positioned on top of additional div elements

My HTML code consists of simple div tags <div class="left">Project Name: </div> <div class="right">should have a name</div> <div>Shouldn't this be on a new line?</div> These classes are defined in a stylesheet as ...

htmlcss

Submit form only if the field value is valid

I created a form with an input field that captures the user's mobile number and validates it to ensure it begins with '0'. The validation process is functioning correctly, but I am encountering a problem when submitting the form. Even if the ...

javascriptjqueryhtmlcss

Switch from using a select tag to a check box to easily switch between a dark and light theme

I have implemented a feature on my website that allows users to toggle between dark and light themes using the select tag with jQuery. Here is the code snippet that I am currently using: $(function() { // Code for changing stylesheets based on select ...

javascriptjqueryhtmlcss

What could be causing the inconsistency in my CSS performance in IE8?

I am encountering an issue with the CSS on my website specifically in IE8. The problem lies within the CSS intended to outline input elements labeled with class="error" with a 2px red border. While this function performs as expected for some input elements ...

cssinternet-explorer-8

Images, CSS files, and JavaScript files in asp.net mvc are experiencing issues with caching

To ensure better security and consistency, I made sure that my pages were not cached. Whenever I pressed the back button on my browser, it always contacted the server to retrieve the HTML content. I accomplished this by implementing a custom action filter ...

javascripthtmlasp.netcssasp.net-mvc

The Semantic-UI Dropdown does not appear when utilizing the sidebar feature

Is it normal for a dropdown in the pusher not to show when using a sidebar? I tried setting overflow-visible but it didn't work. Any suggestions on how to resolve this? Check out this JSFiddle example: https://jsfiddle.net/3djmjhn5/1/ Code: $(&ap ...

htmlcsssemantic-ui

Achieve mobile responsiveness for search fields with Bootstrap 4

Attempting to center my search field using the code below did not yield a responsive result. On mobile, it remains right on top with the footer, unlike on desktop where I'd like to see some space between them. This discrepancy only surfaces in small ...

htmlcsstwitter-bootstrapbootstrap-4

Setting a uniform width for all columns in a table using ReactJS

When working with variable amounts of data displayed as columns in a table, I struggled to maintain fixed widths for each column. Despite my efforts, the columns would stretch based on available space rather than obeying the specified widths. For example, ...

cssreactjshtml-tableflexboxmaterial-ui

Switch Bootstrap Tab

I have successfully implemented a bootstrap tab on my webpage and it is functioning as intended. Now, I am interested in adding an additional feature to the tabs. My question is, is it possible to toggle the content area if the same tab is clicked again? ...

javascriptjquerycsstwitter-bootstrap

Ensuring a row of bootstrap cards is consistent with the height of the tallest card

Currently, I am working on a small personal project to test my skills in Django and Bootstrap. My challenge lies in displaying a list of quizzes in individual cards using a for loop, where the height of each card varies due to the length of the quiz descri ...

pythonhtmlcssdjangobootstrap-4

Ways to center items in a row-oriented collection

When dealing with a horizontal list, the issue arises when the first element is larger than the others. This can lead to a layout that looks like this. Is there a way to vertically align the other elements without changing their size? I am aware of manual ...

htmlcss

Bootstrap - Unintentionally triggering automatic scrolling on the page

Recently, a strange issue has started occurring on my website. I haven't made any changes to the index that could have caused it. When using the regular web address, the page automatically scrolls down. But when I type in www.domain.uk/#, everything w ...

htmlcsstwitter-bootstrap

Display a triangle underneath the chosen menu option

How can I display a small triangle below the selected menu item, similar to my tag box? I have tried various methods without success. You can view my attempts at this link. Any suggestions on how to achieve this? Thank you! nav { float: right; m ...

htmlcss

Guide on integrating CSS into a Vue Bootstrap table design

I am having trouble adding a CSS to my bootstrap vue table template. <template slot="actions" slot-scope="data" :style="{min-width:'150px'}"> <b-button variant="info" @click="showViewModel(data.item)"> <i class="fa fa-e ...

cssvue.jshtml-table