Responsive Navigation - Regular Menu to Mobile Menu Gap « Support Forum | Kriesi.at - Wordpress Themes and HTML Templates

Kriesi.at - Wordpress Themes and HTML Templates

Support Forum » Choices

resolved

Responsive Navigation - Regular Menu to Mobile Menu Gap

15 posts from 5 voices

Started 10 months ago by kristinaabbott
Latest reply from Ismael
This topic is resolved

Tags:

kristinaabbott
Member

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

Posted 10 months ago #
Devin
Moderator

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

Posted 10 months ago #
kristinaabbott
Member

Thank you, Devin.

I appreciate you checking.

Best,
Kristina.

Posted 10 months ago #
kristinaabbott
Member

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.

Posted 10 months ago #
kristinaabbott
Member

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

Posted 10 months ago #
Dude
Dude
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.
Posted 10 months ago #
kristinaabbott
Member

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.

Posted 10 months ago #
Dude
Dude
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).
Posted 10 months ago #
kristinaabbott
Member

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.

Posted 10 months ago #
Dude
Dude

Hi!

I hope it worked out?

Best regards,
Peter

Posted 10 months ago #
tomitos
Member

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.

Posted 9 months ago #
tomitos
Member

Also:

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

Tomaz

Posted 9 months ago #
Dude
Dude
Hi!

Try to add following code to css/custom.css:
```
.main_menu{
height: auto !important;
}
```
Regards,
Peter
Posted 9 months ago #
tomitos
Member

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

Posted 9 months ago #
Ismael
Moderator

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

Posted 9 months ago #

RSS feed for this topic

Reply

You must log in to post.

© Copyright Kriesi.at – Wordpress Themes and HTML Templates

top