WordPress.org

Forums

Hueman
[resolved] Styling of Top Header Menu Bar sub items (6 posts)

  1. karsten007
    Member
    Posted 1 year ago #

    Hello,

    my site is: http://www.kagels-trading.de

    I need some help regarding the CSS of the last menu item in the top header "Impressum". Currently I am addressing the last three items with #menu-item-id. For example:
    #menu-item-80 { float: right; margin-right: 80px; }

    Is there a more elegant way to style the last menu items?

    And also I would like to address the two sub items of "Impressum". I would like to short the light green background here which goes far too wide on the right side.

    Thanks for any suggestions!

    Karsten

  2. Mike Orange
    Member
    Posted 1 year ago #

    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

  3. karsten007
    Member
    Posted 1 year ago #

    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:

    http://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

  4. Mike Orange
    Member
    Posted 1 year ago #

    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 http://wordpress.org/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 http://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 http://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 http://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 http://wordpress.org/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...

  5. karsten007
    Member
    Posted 1 year ago #

    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

  6. Mike Orange
    Member
    Posted 1 year ago #

    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 http://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

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic