HTML CSS Styling Problem with Linkmenu

[Maik1]

Hello,

i have a HTML CSS Styling problem.

In my site i have place a linkmenu into a box with position fixed css attributes, because i want that this linkmenu stays visible if the site is scrolling down.

The problem is, when a browser is not high enough, for example on a smartphone display, then you can not see the box which come out when you hover the links from the linkmenu.

Please take a look to the picture that i have attach then you can better understand what i mean.

Does somebody know a solution how to make it better?

[Gandalf]

Hi @Maik1

We can’t help you with your code unless you post the code you currently have.

And it would help if you explain what you mean by “make it better”.

[Maik1]

Hi, thanks for your help.
With make it better i mean a solution to make the dropdown menu box visible also in smaller display which are not so high.

The dropdown menu box which gets open when you hover the Link is 350 pixel high, on my desktop pc it looks ok, the complete dropdown menu is visible, but if i make the height from the browser smaller then it looks like in the example picture above, the dropdown menu is then not visible completly, because the btrowser height is to small and in smartphones for example it is always like o small display.

Is it more clear now what i mean? I can try to explain it better again.

[Maik1]

Here is for example a Code:

/*CSS Linkmenu */
#linkmenubox
{
position:fixed;
}
#linkmenubox a
{
display:block;
float:left;
width:50px;
}
#dopdown
{
display:none;
width:100%;
height:350px;
}
#linkmenubox a:hover + #dopdown
{
display:block;
}

HTML

<div id="linkmenubox">
 <a href="">Link</a>
<div id="dopdown">This is the dropdown menu</div>
</div>

[PaulOB]

If your drop downs have a max-height of 300px (although that smells of magic numbers) then you could use a media query based on the height of the viewport and then unfix the fixed menu so it’s a normal menu and everyone will be able to scroll and see the contents.

e.g.

@media screen and (max-height:400px){
 #linkmenubox{
 position:relative;
 }
}

There are other more complicated methods such as creating a srcoll on the dropdown but I would be inclined to do what I say above and also remove the fixed menu for smaller screens anyway (media query based on width) as mobile screen space is limited enough without fixed menus taking up space.

Fixed menus are best for small items that are unlikely to wrap but awkward in most all other cases.

[Maik1]

That was a helpfull tip PaulOB, it works that way, but i must think to change also some think in the complete style of the website, because normaly my idea was to offer this fixed menu on the top of the site for better navigation.

maybe the only way to offer a fixed menu in small displays is a fixed hambuger menu on the left side with a slideing sidemenuon comeing out on click.

[PaulOB]

@Maik1

maybe the only way to offer a fixed menu in small displays is a fixed hambuger menu on the left side with a slideing sidemenuon comeing out on click.

Yes that is a better option

I usually do something like this.

[Maik1]

Thanks again, the tipp with makeing the header menu position:relative at small displays have help me. I will offer that for the smaller displays and the standard design for all other bigger displays. I dont like to have so many different styles, i find it better if everythink is simple but with all this different requerements this days its not easy to make somethink fit for all browsers.