Styling of Top Header Menu Bar sub items

Hi Karsten,
I looked at your child theme style.css.
Well – there is no more elegant way when you are addressing menu items directly – 3 items float:left and rest 3 float:right – just joking, it looks good, but when you started this way, keep on “hacking” ??
Problem with too wide sub menu for last menu item is caused by:

@media only screen and (min-width: 720px) {
#nav-topbar .nav ul { text-align: left; width: 350px; } /* line 68 of child style.css*/
}

-this gives fixed width 350px for all sub menus generally
-menus under “Trading-Ausbildung” has text long enough, so it “looks normal”
-menus under “Impressum” has short text, but fixed width 350px remains and “right gap” appears
As I see, there are 2 solutions:
1- to remove your code above and let long text to wrap in more rows
2-to change last menu sub item’s width with fixed no. of px:

.menu-item-80 ul, .menu-item-80 ul li {width:nnpx!important;}

I tested on local install reset with:

.menu-item-80 ul, .menu-item-80 ul li {width:auto!important;}

but doesn’t behaves well on second level of sub menus (for first level is OK, but maybe you’ll sometimes add new sub level and wonder what’s going on ??
Note: I used “!important” just in case, sometimes it isn’t necessary.
If you have any additional questions, feel free to post here.
Regards,
Mike

Hello Mike,

thank you for your quick and very helpful response.

I chose the solution of a fixed width for the sub menu items.

I have another problem regarding the top header and footer menu items.

The menu items are squeezed as you can see here on my screenshots:

https://www.kagels-trading.de/test/

This problem seems to exist only on a MacBookpro using Firefox Browser.

Do you have any idea what could cause this strange behaviour?

Thank you very much and

Regards,

Karsten

Hello Karsten,
I saw your post with buggy screenshot (removed later), but had no time to reply.
Looks “pretty ugly” – but …when you start CSS hacks, never give up, as I wrote before.
Responsive websites (not only made in WP) are very tricky – read my reply to @globe Guide (having responsive issues also) at https://www.ads-software.com/support/topic/please-help-mobile-issues-1?replies=4#post-5791130
As mentioned there, nobody has all mobile devices ready for test, so I personally use tools like https://quirktools.com/screenfly/
There are some additional “bad news” for your website: if you test it there, on resolutions below 1024 px – 800X1260, Kindle Fire 8,9″ for example, menu is broken in 2 rows. On res. 603 px and less (Google Nexus 7 for example) – appears “3 stripes mobile menu” button, but as you click it – mobile menu is distorted again.
Mobile phones – Samsung Galaxy… 360X640px- looks better, but not correct, “Impressum” and & rest of menu items below does not behave well.
Another playground https://www.mobiletest.me/ – for 6 models of mobile phones – click on “3 stripes mobile menu” shows same distortion for last menu items mentioned above.
Good news – footer menu looks OK.
There are a lot of “playgrounds” – like https://ready.mobi/launch.jsp?locale=en_EN – I am pretty good with CSS & PhP, but 50% of info from this site is “out of my universe” (obviously, I’ll have to work it out ??
My guesses, regarding your child theme:
–.menu-item-80 ul { width: 150px !important } – line 34 – fixed px are not quite “responsive friendly” (yes, I suggested it as 1 of possible solutions)
– #nav-header .nav li a { color: black; } – line 55 and below – that’s “middle” menu you are not using -remove it -just making additional mess
-generally, all CSS fixed dimensions in px obviously can cause some issues on mobile devices
I don’t have MacBookpro (some of my friends has it, but …) – so I wonder that your footer is distracted also (in child theme, you made no modifications on “#nav-footer .nav-toggle”)
BTW – you have some unnecessary parts in child style.css like “#nav-header .nav li a { color: black; }” – that’s “middle” menu – you are not using it.
Further suggestions:
– try to switch off child theme (I think you didn’t made PhP modifications) and see how your website behaves in Hueman basic theme
– it is very clean written, Alex is great author (ok, at the moment on vacation at least 3 weeks,but he will appear online ??

Personally, I’m also interested in mobile issues, you can find my Hueman theme modified website in my profile -> Threads Started ->no 3
or https://www.ads-software.com/support/topic/social-icons-visibility?replies=2 (I replied to myself:) – no propaganda, hope moderators will not remove link – so any suggestions & bugs that you find are very welcomed.
That’s all for now, we can continue in this thread, or – since issues are “mobile” specific – private communication via email.
No charges, of course, I’m Hueman theme freak at the moment (maybe some German beer like Warsteiner – if we meet out of cyberspace ??
Best regards,
Mike
PS -Sorry for long post, hope it helps, but 1 more – I saw my website on who/knows/where/made cellphone – disaster – you can’t beat them all…

Hi Mike,

thanks again for your very helpful post.

At the moment I have switched off my child theme and the menu items behave normally. But strange…the widgets in the secondary sidebar are not there anymore…they disappeared.

The two playgrounds (quirktools and mobiletest) are very helpful. Thank you also for these tips.

I like your “orange” website very much. It looks very fresh and stylish.

Yes, perhaps I have to wait until Alex is back from vacation in order to find the right solutions for “splitting the menu” into two parts.

Warsteiner Bier is good choice….I would apreciate to invite you.
But I couldn’t figure out where you are based…

I will mark this topic for now as resolved, and I will open a new topic when I can be more specific regarding the top menu.

Thank you

Best regards,

Karsten

Hi Karsten,
Thanks for compliments for my “orange” baby.
Lost widgets – strange indeed, they are not there (examined it with Firefox / Firebug). Your main page source from line 109 has some code related to right sidebar “.s2 .post-nav li a:hover i, .s2 .widget_rss ul li a, …” but none of it can cause all right sidebar widgets to disappear (obviously you used some CSS modifications that are not in child theme).
Advice: from my experience, I know that changing WP theme (not only Hueman) sometimes causes “mysterious” behaviors like vanishing widgets.
So, just check in widgets section are they still there or right sidebar is empty as it looks.
Menu issues- you are right – Alex will appear for sure (I was kidding about vacation), if above widget suggestion helps, your website still looks OK (maybe all that CSS modifications were “too rude” for menu splitting).
My location – Cyberspace mostly, physical location half mile from https://www.exitfest.org/en, Serbia – not too far from Germany, but too far too drop by for a couple of beers, but who knows…( been many times in Germany, and a big fan of Warsteiner ??

Best regards,
Mike