Is there a way to align a div to the center of the BODY element instead of its parent in

I have a sticky navigation bar with the tab "categories" that reveals the dropdown menu "categoriesDropdown" when hovered over.

  • I want the dropdown menu to span the width of the screen and be centered on it.

  • I also need the dropdown menu to stick to the bottom of the navigation bar.

However, I am facing an issue where I can only center the dropdown menu relative to its parent div (categories). The code snippet I am using is displayed below:

<div class="categories">
   <a>Categories</a>
   <div id="categoriesDropdown"></div>
</div>

CSS:

.categories {
    padding-left: 20px;
    padding-right: 20px;
    height: 45px;
    display: inline-block;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

#categoriesDropdown {
    position: absolute;
    background: #1d1d1d;
    width: 100vw;
    height: 0px;
    z-index: -1;
    overflow: auto;
}

#categoriesDropdown.show {
    height: 500px;
}

Edit: When I try to use left: 0; right: 0; the grey square represents the drop-down menu.

htmlcssdrop-down-menu

Answer №1

Finding a solution using only CSS can be challenging, but here is an option that utilizes jQuery and CSS. It may or may not be helpful for your needs.

Body 

<div class="categories">
  <a>Categories</a>
  <div id="categoriesDropdown" class="categoriesDropdown">  </div>

Css 

body{
  margin : 0px;
  padding : 0px;
  }
  .categories {
  padding-left: 20px;
  padding-right: 20px;
  height: 20px;
  display: inline-block;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  cursor : pointer;
  top: 50px;
  position: absolute;
  }
  .categoriesDropdown {
  position: relative;
  background: #1d1d1d;
  width: 98vw;
  height: 0px;
  z-index:-1;
  overflow:auto;
  margin:0 auto;
  color:#fff;
  }
  .categoriesDropdown_show {
  height: 100px;
  }

Script

$(document).ready(function(){

  var c = $(".categories");
  var position = c.position();

     $(".categories").mouseenter(function(){
        $("#categoriesDropdown").appendTo('body');
         $(".categoriesDropdown").addClass("categoriesDropdown_show");
         $('#categoriesDropdown').css({'top':'calc('+position.top +'px + 20px)'});
     });
     $(".categories").mouseleave(function(){
         $(".categoriesDropdown").removeClass("categoriesDropdown_show");
         $("#categoriesDropdown").appendTo('categories');
     });
  });

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

A step-by-step guide on generating a single chip using the same word in Angular

I'm trying to find a solution to ensure that only one chip is created from the same word inputted, instead of generating duplicates. Currently, users can input variations such as "apple," "APPLE," "apPPle," "aPpLe," and I want to automatically conver ...

htmlangularjsangulartypescriptangular-material

Creating a bold portion of a string

My task involves dynamically creating <p> elements within a div based on the contents of my codeArray, which can vary in size each time. Instead of hard-coding these elements, I have devised the following method: for(i=1;i<codeArray.length;i++) ...

javascripthtmlcssstring

Utilizing duplicate elements (sub-template) within AngularJS

Looking for a way to avoid duplicating HTML content in my template, which currently repeats the same structure with minor changes: <div class="xyz-state0" data-ng-hide="data.error || !data.states[0].name"> <div class="xyz-content"> ...

htmlangularjs

Showing a numerical value in the bottom-right corner alongside a backdrop of an image

I am attempting to create a container that measures 26x26 pixels and showcases a number at the bottom right corner of this container. Furthermore, I want to include a 24x24 picture as the background of the container. The code I have written so far is disp ...

htmlcss

Activating the CSS :active selector for elements other than anchor tags

How can I activate the :active state for non-anchor elements using JavaScript (jQuery)? After reading through Section 5.11.3 of the W3C CSS2 specification in relation to the :hover pseudo selector in hopes of triggering the activation of an element, I stu ...

javascriptjquerycss

Filtering jQuery by excluding certain strings from an array

I have a list of six option values retrieved from a database table, including #blog and #hariciURL, among others. In another table, I need to disable the options that match values in an array, except for #hariciURL which should never be disabled. How can ...

htmljqueryhtml-select

Expand a div in navigation using JQuery

Check out this code snippet: .container { width: 150px; height: 100px; } .test { color: white; background-color: red; width: 100%; height: 25%; transition: height ease 1s; } .test:hover { height: 100%; } <div class="container"> ...

javascriptjquerycss

Guide to creating HTML file with SSI tags

Currently, my website uses Nginx SSI tags to dynamically include template files such as the header, footer, and sidebar. However, I need to provide the final HTML output to clients instead of running it on their browsers. The issue I'm facing is that ...

htmlnginxssi

Uploading a File to a Remote WCF Service via jQuery AJAX on Different Domains

I am currently facing some difficulties in achieving the following task and would really appreciate any guidance you can provide. My goal is to upload a file from my HTML5 site to a cross domain WCF service hosted in IIS 7.5. Additionally, I need to send ...

c#jqueryasp.nethtmlwcf

Apply unique colors to each accordion title in CSS

I am working with a bootstrap accordion and I want to customize the color of the h4 titles for the elements within the DOM. My goal is to have distinct colors for the first 4 elements, then repeat those colors. .my-platform-title:nth-child(2n+1) { c ...

htmlcsstwitter-bootstrap

Steps for transferring an `<li>` element from one `<ul>` to another

<ul id="List"> <li class="li">1</li> <li class="li">2</li> </ul> <ul id="List2"></ul> const items = document.querySelectorAll(".li"); for(var i = 0; i < ...

javascripthtmljquery

Create a dropdown menu in jQuery by using the prepend trigger

I'm attempting to utilize jQuery to prepend a trigger to a menu and then have that trigger toggle child elements. Unfortunately, the code below is not opening the sub menus when using jQuery prepend. Can anyone provide a suggestion for a fix? HTML & ...

jqueryhtmlcss

How to distinguish between clicking once and double clicking in jQuery

Currently, I am developing a basic tic tac toe game for two players with the help of jQuery. The main requirement is to insert an "X" when the user single clicks and an "O" when they double click on the designated square. Here is how I achieved this functi ...

jqueryhtmlwebweb-applications

The alignment of Bootstrap columns is causing them to overlap

I'm currently working with the bootstrap 4 grid system, trying to create a layout with two columns where the left column is fixed and the right column is scrollable. The issue arises when I set the position of the left column to fixed, as it is taken ...

htmlcsstwitter-bootstrap

What exactly is the role of the @altfontfamily variable in Bootstrap?

Within the variables.less file, specifically in the typography section, you will find a variable named @altfontfamily. I am interested in utilizing the Alt Font Family but I am unsure of the process. Is there a specific class that needs to be called in or ...

cssvariablestwitter-bootstrap

Experiencing issues with AngularJS code when attempting to use two controllers simultaneously in a single form

Just starting out with AngularJS and I'm attempting to merge two ng-controllers together. Prior to this attempt, the initial selected drop down option was correctly chosen. However, now that I have combined the controllers, the drop down option desig ...

angularjsdrop-down-menu

If a <section> element contains a <header>, must it also include a <footer>?

Here is the current state of my code: <section id="one"> <h2>Section Title</h2> <p>Lorem ipsum...</p> <p>Lorem ipsum...</p> <p>Lorem ipsum...</p> </section> <section id="two"&g ...

html

Angular 10 is displaying a message indicating that a font has not been

I'm facing an error in my Angular project when trying to add a font to the SCSS file. How can I resolve this issue? style.scss: @import "~@angular/material/theming"; @include mat-core(); $PWP-primary: mat-palette($mat-indigo); $PWP-accent: ...

cssangularsassless

Creating a layout with four columns in the Bootstrap grid that will automatically collapse to two columns and then one column as

Check out my progress with Bootstrap: <div class="container-flex"> <div class="row"> <div class="col-lg-3">1</div> <div class="col-lg-3">2</div> <div class="col-lg-3">3</div> <div class="col-lg-3">4< ...

htmlcssbootstrap-4

Issue with alignment in the multiselect filter of a React data grid

In React Data Grid, there is a issue where selecting multiple filter options messes up the column headers. Is there a solution to display selected filter options above a line in a dropdown rather than adding them to the column header? The column header siz ...

javascriptcssreactjsreact-data-grid