Hamburger active state div positioning

HTML & CSS
1

This is the HTML markup →

<body>
<div class="wrap theme-width">
	<header class="header theme-width"></header>
	<section class="main theme-width"></section>
	<footer class="footer theme-width"></footer>
</div>
</body>

Objective: The header has a hamburger menu click, and once the hamburger is in an active state I want a full-page, will width div container where I can show my menu, etc.

↓

<div class="hamopen theme-width">
<p>Placeholder Text. Actual menus will be here when hmaburger is active</p>
</div>

I want the above div to be just below the header when the hamburger is active.

image
image1366×735 78.3 KB

I can handle JS part etc, but I could not position it. I tried it like this:

I make it a child to buy and tried, and later I make it a child to header, and used it like this:

.header {position: relative;}
.hamover {
	position: absolute;
	height: 100vh;
	top: 100%;
	left: 0;
	border: 2px solid red;
	background-color: #FFFFFF;
}

It didn’t deliver anticipated results.

fixed/absolute/sticky which will be the best option?

2

I see one problem with the markup, though I don’t know if correcting it resolves the problem:

top: 100%; is not right. It should be top: 100; or top: 0;

100 would be 100px from the top and 0 would put it at the top edge. https://www.w3schools.com/cssref/pr_pos_top.asp

1 Like
3

Its an absolute relative to the header. I wanted it just below the header. so top 100% is justified.

4

My bad. I see now. I changed top:0; to top 100%; in the page link and it moved down. Learned something new!

1 Like
5

That makes no sense, That means the element will be 100vh and then positioned 100% down from its relative parent. That means it will be too big for the viewport.

I’d need to see the page (or a reduced demo) as there is too much going on to give a simple answer

1 Like
6

Hi there, I give it a try with 2 positioning methods.

Attempt #1 with position :absolute
Associated css: hamburger.css
nav under header as child

Attempt#2 with position:fixed
Associated css: hamburger-2.css
nav is child to body now.

Certain challenges exist in both: fixed and absolute.
The header in the real-life situation will not have the same height, depending on the logo, the height may slightly vary. That why in position absolute example I sued top 100%, and it worked, but issues were:
absolute was not scrolling.

I moved to fixed position. In fixed positioning, I am facing an issue.

In position fixed, the header which holds that hamburger click is also not fixed so during a scroll that hamburger cross is lost.

7

My computer won’t let me go there :slight_smile:

Screen Shot 2021-07-23 at 12.20.49
Screen Shot 2021-07-23 at 12.20.491405×743 36.5 KB

Any chance of a reduced codepen so I can play around with it. It may also help to have the most simple version of what you are trying to achieve rather than try to fit it somewhere where it can’t work as you want. Once you have a basic demo then you can see how it can be made to work in more complicated situations.:slight_smile:

1 Like
8

I haven’t done anything, I am speaking to my hosting company about what went wrong. I will update you soon.

9

Hi There,

The issue with those links is fixed now. There was no HTTP to HTTPS redirect so it was blacklisted. The issue is fixed now. In those versions I have reduced too much HTML

10

The absolute menu seems to be working although you have made it too tall.

You can correct that with the following (or use a max-height instead of the height if you want initial content height).

.hamover {
    position: absolute;
    height: calc(100vh - 100%);
    top: 100%;
    left: 0;
    border: 2px solid red;
    background-color: #FFFFFF;
    transform: translateX(-1600px);
    transition: transform 0.5s;
    padding: 40px;
    overflow: auto;
}

The fixed menu isn’t well thought out so we really need to know what effect you want to achieve? Ideally you would want the header fixed when the menu is open because the hamburger will scroll away.

Either attach the fixed nav to the bottom of the header html and then just fix the whole header when the hamburger is open and all will be ok. You then don’t have to worry about its position as it will be in the right place. You can set a max-height as in the other code to allow the header to scroll within itself.

Alternatively slide the hamburger from the left but push the page to the right while the hamburger is open. Include a close hamburger icon inside the fixed section so you can close it.

Alternatively include a logo and hamburger in the sliding section so that you can put it from top to bottom.

This seems to be more a design question so perhaps if you can explain what you want to happen it might make more sense.?

1 Like
11

Roughly like this:

It all depends what you want to achieve.

1 Like
12

Hi, there @paulOB,

I don’t have any clear picture of what can be done, and what was my motive, bt I am trying something on my localhost, and will update you soon.

1 Like
13

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.