Jump to content

css drop down menu position and width

Recommended Posts

After  reading various tutorials I implemented drop down menus for my site and all appeared OK(ish) until I looked at it on my cell phone. Now I'm trying to figure out a neat way to get round the layout problem and hope someone can suggest a neat way to solve it...

  • menu 3 shows a drop down menu using hover attribute (forgive the colors, it's garish to help me see what is what).
  • alas menu 2 is too wide because I had set white-space:nowrap for the menu options and so it gets truncated on the narrow screen.
  • taking off the nowrap, it's wrapping on every word and I don't really want to force it to be be width 100% because then menus with only short entries look terrible.

I tried max-width, but that didn't help. I am confident someone somewhere will have solved exactly this problem and I'm hoping to do it in without resorting to javascript.

Thanks in advance for suggestions.





Link to post
Share on other sites
On 1/31/2021 at 11:06 PM, dsonesuk said:

Identify width from side, then with calc() subtract this width from total 100% width.

I was as yet unaware of vars and the calc function (there is a lot to learn with this css malarkey and I really appreciate the help I have received on these forums).

I found calc() and var() vastly more flexible than the php I had been using to generate my css.

Just for the record: I've implemented my color schemes with css vars now and also the menus are working great... some of it still needs tweaking but prototype demo is here: http://ngaro.online 

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...