Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
brandyglows

How do I center a full-width div nested in an off-center parent div?

Question

Posted (edited)

Site URL: http://www.brandyglows.com

Hello, everyone!

This seems to be an unusual problem, as I haven't seen anyone else ask about it. I've been working on a site which features a sticky navbar and a mega menu dropdown. I don't have access to the HTML, so I'm having to use a lot of pseudo elements and some jQuery to get things right.

Here's the dilemma: due to limitations in the CMS platform, I'm breaking this template into pieces and putting it back together again. Right now, that means I've taken one of the CMS-managed footer layouts and appended it to the header navbar to be used as a dropdown for a full-width mega menu. This worked well enough at first, but only using position: fixed to get the centering right.

A few features later, the navbar is sticky, it resizes and displays a logo on scroll, and long story short, the position: fixed mega menu looks like a detached appendage when viewed further down the page, jutting out of the middle of the viewport. I am thinking I need a position: absolute solution, to tether it back to its navbar brethren. But centering it at width: 100vw is proving to be a challenge.

When I resize the window, it gaps left and right, and clearly loses its center. After poking around, I'm realizing that it's caused by the 100vw mega menu div being "nested" inside a roughly 30px navbar element which is arbitrarily placed, and not centered.

I've seen plenty of great answers to absolute centering here, which are brilliant, but don't speak to the problem of centering a large absolute div in a small relative parent, and maintaining center on resize when the parent is not centered to begin with. Is there a way around this? Thanks for having a look, if you did so.

The CSS:

/* Frankenmenu */
.Header-nav--primary .Header-nav-inner .Header-nav-item--folder:nth-child(2) .Header-nav-folder 
{
    padding: .65rem 0 0 0;
    box-sizing: border-box;
    visibility: hidden;
    margin-left: -432.5px;
    height: auto;
    width: 100vw;
    position: absolute;
    left: 50%;
    top: 3.05rem;
    letter-spacing: 0;
    line-height: 1.5rem;
    box-shadow: inset 0 .15rem .15rem -.10rem rgba(0, 0, 0, 0.1),
                      0 .05rem .25rem 0 rgba(0, 0, 0, 0.1);
}

/* Extend Frankenmenu hitbox */
.Header-nav--primary .Header-nav-inner .Header-nav-item--folder:nth-child(2) .Header-nav-folder::before 
{
  content: "";
  display: block;
  height: 1rem;
  position: relative;
  top: -.5rem;
  width: 100%;
}

/* Reveal on hover */
.Header-nav--primary .Header-nav-inner .Header-nav-item--folder:nth-child(2):hover .Header-nav-folder 
{
    visibility: visible;
}

/* Hide template menu on hover */
.Header-nav--primary .Header-nav-inner .Header-nav-item--folder:nth-child(2) .Header-nav-folder > a 
{
    display: none;
}

The site:

URL  http://www.brandyglows.com
P/W  'temp'
Edited by brandyglows

Share this post


Link to post

0 answers to this question

Recommended Posts

There have been no answers to this question yet

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...