Adjust the padding at the top of the content according to the height of the fixed header

Currently, I am working on a design layout that includes a fixed header, a main nav, and an additional navigation bar called #sub_nav. The problem arises when the #sub_nav contains numerous items to choose from - as I decrease the width of the browser window, the last item ends up breaking onto the next line, hiding behind the flexible header.

To give you a better visual representation, please refer to this illustration:

Explore this jsfiddle

I am seeking a CSS / JS solution to address this issue. Additionally, I am open to jquery solutions as well.

I apologize if the image is bothersome, but I trust it helps convey the problem I am trying to solve.

javascriptjquerycss

Answer №1

[UPDATE] The fixed header is causing an overlap with the main content. To resolve this issue, you can implement a solution using jQuery to adjust the top padding of your #mid element when the height of #sub_nav exceeds its actual height. Here's an example of how you can achieve this:

$(document).ready(function(){

    var subNav = $("#sub_nav");
    var main = $("#mid");

    if(subNav.height() > 25){
        main.css({"padding-top": "220px"});
    }
    else{
        main.css({"padding-top": "190px"});
    }

    $(window).resize(function(){

        if(subNav.height() > 25){
            main.css({"padding-top": "220px"});
        }
        else{
            main.css({"padding-top": "190px"});
        }

    }); 

});

Answer №2

It is not possible to have the header fixed or absolutely positioned while also positioning the div#mid element relative to it and allowing the content from the header to push it down.

I recommend considering shortening the subnav links for better design and user experience. A responsive layout could also be implemented to adjust the menu design when the browser width becomes too narrow.

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

Tips for patiently waiting for a series of asynchronous calls to successfully complete

I have a scenario where I am dealing with multiple asynchronous calls that are dependent on each other's success. For example: function1 = () => { /*Some required Logic*/ return fetch("myurl") .then((json) => { functi ...

javascriptjqueryajaxasync-await

freshly opened window shutting down right after its inception

Hello everyone, I've encountered an issue with my code. I'm trying to open the sign-in page from the next-auth library in a new window using the react-new-window library. The problem is that when I click on the button, the new window opens and im ...

javascriptreactjsnext.jsnext-authreact-new-window

Is it possible to incorporate a React app as a component within a static HTML page?

Looking to integrate the react-csv-viewer component into a static HTML page without deploying it on a local server. I've tried following the instructions from the React tutorial, but am struggling with the build process. My goal is simple - to use th ...

javascripthtmlreactjsnpmbuild

Divide data into an HTML table and merge it with header information

My HTML form contains an interactive HTML table where users can add/delete rows. I am sending this data to a Google Sheet and need to store the row information with corresponding header details. Each time a user submits the form, a new row is added to the ...

javascriptjqueryhtmlajaxgoogle-apps-script

What is the best way to position a drop-down box in front of images?

After creating a gallery page to showcase website images, I encountered an issue where the images overlapped with the drop-down boxes of my navigation bar. Unfortunately, this means that I am unable to click on the drop-down boxes in order to navigate to o ...

htmlcssimagedropdown

The connections between children in the Highcharts Org chart are getting tangled up

I am facing an issue with the organization chart I created using highcharts. Specifically, at the 3rd level, the links are becoming merged or overlapped with other child links. The data for the chart is being sourced from an ERP system and contains informa ...

javascriptchartshighchartsorgchart

"Integrate checkbox functionality in datatables to dynamically toggle the WHERE clause

Currently, my datatable is being populated successfully with ColdFusion and the sorting is working perfectly. One of the columns in the SQL table is the status. At the moment, I am fetching all the results where the status is not 'Completed'. Al ...

jquerysqlcoldfusiondatatables

Increasing the width of a line to fill the entire space using CSS properties

Seeking alternative ideas to replace my current solution using only CSS for one of the problems. I already have a working JS solution, but I'm interested in exploring a CSS-only approach. https://i.sstatic.net/PQ7er.png A) All elements here have the ...

htmlcssfluid-layout

Creating a responsive layout with full-height divs within Bootstrap 4 columns

I am struggling to achieve uniform height for all my .element elements and need the image to be vertically aligned in the middle if it is too small to fill the space. I have tried numerous approaches but haven't been able to find a solution. .eleme ...

csstwitter-bootstrapflexboxbootstrap-4twitter-bootstrap-4

Ways to enlarge the font size of a hyperlink

I am just starting out with coding and I need to figure out how to increase the font size of my link. <!DOCTYPE html> <html> <head> <style> /* unvisited link */ a:link { color: #FFFFFF; } /* visited link */ a:visited { color: #FF ...

htmlcss

Formatting numbers in JavaScript objects

I am looking to iterate through an array of objects and convert the string values into numbers. Here is a sample scenario: I have data in a format similar to the variable provided below. When passing this array to a kendo chart, it seems to have trouble r ...

javascriptjqueryarraysobject

Save picture in localStorage

Hello, I am currently working on a page where I need to retrieve an image from a JSON file and store it locally. Below is the code I have been using: <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-1.10.1.min. ...

javascriptjsonhtml

Use jQuery to Toggle Between Excerpt and Full Content

I stumbled upon this link: Toggle Posts in wordpress using jquery, but unfortunately, it doesn't quite meet my needs. I have a custom post type and what I'm trying to achieve is having an excerpt with a "Read More" link that toggles or slideToggl ...

jquerywordpresstoggle

Position the image on top of the details

I have an image with a spinner rotating around it through animation, accompanied by two boxes containing information as depicted in the uploaded image below. However, I would like to position the image above the boxes rather than beside them. .about-img ...

htmlcssimagebootstrap-4

Displaying historical data on hover in a chart using Vue3 and Chart.js

Displaying previous data on hover in Vue3 Chart JS After updating my chart data with API information, I encountered an issue where the chart would display the previous API data when hovering over it. I attempted using distory() but it did not resolve the ...

javascriptvue.jschartsvuejs2vuejs3

Indicate the initial position of the scroll bar

Currently, I am working on implementing scrolling functionality and attempting to start it at a specific element based on a given id. This is how my html code looks like: <div class="list-wrapper" style="max-height:350px;overflow-y:scroll" > < ...

javascripthtmlangulardart

Which is better for posting data via ajax: using JSON.stringify() or default URL encoding?

Is there a specific advantage to using JSON.stringify() when posting a complex object compared to allowing default url encoding with jQuery.ajax? The MVC WebApi I am utilizing is able to handle both types of requests without any issues, so the need to send ...

jqueryjsonajaxasp.net-web-api

Dealing with a jQuery/JavaScript issue involving thumbnail images

I am facing an issue with smooth transitions between thumbnail images in HTML list tags. I have Jquery listeners set up for mouseenter and mouseleave events that update a parent image when a thumbnail is hovered over. The problem arises when scrolling fro ...

javascriptjquerycsspaddingmargin

What is the best way to retrieve the JQuery property from within a regular JavaScript function?

I am facing an issue with a function that takes an array as input and manipulates its values. The problem lies in the fact that the array is composed of JQuery nodes (specifically spans), and I retrieve the span value by utilizing the .text() method in jQu ...

javascriptjqueryarraysfunction

Pull in class definitions from the index.js file within the node_modules directory

In my project, I have the package called "diagram-js" in the node_modules. The file node_modules/diagram-js/lib/model/index.js contains multiple class definitions as shown below: /** * @namespace djs.model */ /** * @memberOf djs.model */ /** * The b ...

javascripttypescriptnpmnode-modulestypescript-typings