Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #14134

    Hi,

    This theme is AWESOME! The one fly in the ointment for me is the navigation. When I view my site http://www.realestatehelpinghand.org/ on a 15″ Mac laptop, the last menu item gets bumped to a second (invisible) row. If I shrink the browser window, it will eventually trigger the mobile menu. This happens both in Safari and Chrome (on pc, it’s fine).

    This concerned me so I used the emulator http://quirktools.com/screenfly/ and the issue can be replicated looking my site on the tablet resolutions.

    Is it something in my code causing this or can I make the mobile menu trigger the moment that last menu item “Contact” gets bumped?

    I use 24″ monitors, so didn’t realize this was happening until I viewed it on a Mac and don’t know if it’s happening on smaller monitores (seems to only be tablet and Mac issue).

    Thank you in advance,

    Kristina Abbott

    #82201

    Hi Kristina,

    I’m not quite sure what is causing it to behave that way but I’m getting the same result. I’ve tagged the topic for Kriesi however so that he can take a look.

    Regards,

    Devin

    #82202

    Thank you, Devin.

    I appreciate you checking.

    Best,

    Kristina.

    #82203

    Hello,

    I did see this regarding calling the mobile theme earlier, http://www.kriesi.at/support/topic/calling-the-select-main-menu-for-mobiles-to-appear-for-ipad but it still doesn’t address cutting off the last navigation item on a 15″ macbook screen.

    Thank you,

    Kristina.

    #82204

    And… just realized it does the same thing in IE9, even on my 1920×1080 resolution.

    #82205

    Please try following – open up js/avia.js and search for following code line:

    switchWidth: 868,                   							//width (in px to switch at)

    Try to increase the value now (eg set it to 900). This forces the mobile menu function to ignore the menu if it still fits the screen size.

    #82206

    Yes, thank you – I had located that info whilst attempting to solve the issue myself. However, this doesn’t address the original problem I wrote of (which is not a mobile navigation issue). Again, on a 15″ macbook, the last menu item of my site, “contact us”, is dropped to an almost-invisible second row. This also occurs in Internet Explorer (regardless of screen size). This also occurs in some tablets. My understanding was you confirmed this problem as well.

    As this client site is “live” http://www.realestatehelpinghand.org/ , I would appreciate a resolution as quickly as possible. I’m sure it’s something minor that Kriesi could identify immediately if he could simply look at it himself.

    Thank you,

    Kristina.

    #82207

    Try to add following code to css/custom.css:

    .main_menu{
    height: auto;
    }

    If this doesn’t solve the issue try:

    .main_menu{
    height: auto !important;
    }

    or use a fixed value like:

    .main_menu{
    height: 50px;
    }

    (atm the value is set to 15px).

    #82208

    Sorry, did not realize there was a reply (is there a “notify me when someone replies to this thread” option I’m missing?).

    I will try this and appreciate your follow up.

    Best Regards,

    Kristina.

    #82209

    Hi!

    I hope it worked out?

    Best regards,

    Peter

    #82210

    Hi,

    I’m facing with the same problem.

    On my Andriod (4) tablet, last item in my memu falls down to second row (to slider). The same problem shows when I resize my browser.

    Problem occurs when slider is resized to Mobile Portrait size, where site is still wery well visible so there is no need to activate mobile menu.

    Solution could be, if there is any easy way resize font for menu itmes only for the screen sizes between 480 and 767 px.

    I hope you could give us any advice how to do that.

    Website: http://www.rebit.si/smokva/

    Thanks.

    Tomaz.

    #82211

    Also:

    “RSS feed for this topic” does not work. At least for me.

    Tomaz

    #82212

    Hi!

    Try to add following code to css/custom.css:

    .main_menu{
    height: auto !important;
    }

    Regards,

    Peter

    #82213

    Hi Peter,

    the trick does not work ok. When resizing, menu would still break in two rows, It just push first row higher up.

    I just found WP theme with great working resizing menu function. Please try to resize your browser and you will see changing font size.

    http://www.momizat.net/theme/goodnews3/

    This is what I’m looking for. Would be great if there was a simple tricj to do that.

    Thanks.

    Tomaz

    #82214

    Hi,

    Try to use Media Queries. Put this on your custom.css

    /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */

    @media only screen and (max-width: 479px) {

    .main_menu ul:first-child > li > a {

    font-size: .9em;

    }

    }

    Instead of 12px try using em sizes, in this case .9em. Try to adjust the size until the problem is fix.

    Regards,

    Ismael

Viewing 15 posts - 1 through 15 (of 15 total)

The topic ‘Responsive Navigation – Regular Menu to Mobile Menu Gap’ is closed to new replies.