Fixed Header with long Sub Menu Issue

HTML & CSS
1

Hi there!

I’m having difficulties fixing this issue: http://prntscr.com/h69zy1

I have a very long sub menu and whenever I hover that on laptop and smaller monitor you cannot see the menus on the lower part because the header is in fixed position.

Here’s the CSS code when it is in fixed state:

.fixed .site-header {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 10000;
    min-height: auto;
    height: 60px;
}

Many Thanks!

2

I would use a slightly different menu design - have patent search and IP Illustrations etc. as the main options and a second dropdown for the items within that section.

3

If that’s the only way then I need to explain this to my client. Thank you!

4

You could set overflow on the dropmenu so that a scrollbar appears when the menu gets to the bottom of the viewport. It smells a bit of magic numbers as you need to make allowances for the height of the header. It may be ok in controlled situations and you would of course need to consider mobile, touch and smaller screens in a full example.

Here is the basic example that was knocked up in about 5 mins.

All it does is set the fixed menu to top:80px and bottom:0 and adds overflow:auto so a scrollbar appears when needed. In that way content will never go outside the viewport.

Hope it helps.

5

I did it slightly different on my site and had another index type page for each of the main options and separate navigation dedicated to that option.

6

Yes it’s always best if you can avoid using drop down menus at all because of all the issues associated with using them especially where mobile is concerned.

7

Thanks for your help guys! Luckily without saying any word to the client he provided a new Menu Structure of his site and this solves my problem. :smiley:

2 Likes
8

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