Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • August 26, 2013 at 12:45 pm #28437
    mirzepapa

    Hi,

    I am still having a hard time setting responsive design for http://www.energie-frey.de. Since the logo is pretty wide in size (300px) and menu items are fairly long either, menu starts to overlap the logo already from 1043px down. Decreasing logo size should be the last way to go.

    What i have did so far was to go through each and every article on responsiveness, but still do not have a glue what exactly to do.

    So I have tried the various solution in custom.css like @media only screen and (min-width: 768px) and (max-width: 989px) {.responsive .main_menu ul > li > a {font-size: 11px;}}

    @media only screen and (max-width: 1024px) { .responsive #header .main_menu ul {display: none; }}

    and avia.js (likes mentioned here https://kriesi.at/support/topic/top-menu-with-the-social-icons-bigger?replies=5#post-132320) , but all i could achieve was to show the responsive menu earlier, but not hiding the main menu. Main menu disappears with resolutions underneath 768px, meanwhile both menus are there.

    What i want to achieve is show the page in normal mode to lets say 1200px, then objects got scaled smaller, but still showing the main menu with dropdowns e.g., from around 900px main menu should disappears and mobile menu is shown.

    Your help is higly appreciated. Thanks.

    Regards

    Sebastian.

    August 26, 2013 at 7:33 pm #137548
    mirzepapa

    Okay, lucky enough, my friend decided to skip the second step. puh!

    So here is what i want to achieve: Regular Menu, regular page up to 1030px, underneath main menu is skipped and the responsive menu appears.

    Here is what i have added so far to get there:

    In avia.js

    //

    
// responsive menu function
    
//

    

    
function avia_responsive_menu()
    
{
    
var win = $(window), header = $('.responsive #header');
    

    
if(!header.length) return;
    

    
var menu 			  = header.find('.main_menu ul:eq(0)'),
    
first_level_items = menu.find('>li').length,
    
bottom_menu 	  = $('html').is('.bottom_nav_header'),
    
switchWidth 	  = 1030;
    

    
if(first_level_items > 5 && !bottom_menu)
    
{
    
switchWidth = 1030;
    
header.addClass('mobile_menu_tablet');
    
}

    In Quick CSS:

    @media only screen and (max-width: 1030px) {
    
.responsive #header .main_menu ul {
    
display: none;
    
}
    
}

    But still, responsive menu appears a lot earlier, at 1060px (this would be okay, if not) the main menu is still there, below 1024px main menu starts overlapping the logo.

    Sorry for asking that dumb, but i just can`t figure out how to solve this.

    Thanks for your kind help,

    Sebastian.

    August 27, 2013 at 11:26 pm #137549
    Devin

    Hi Sebastian,

    This is a quick how-to for changing when the mobile menu appears: https://kriesi.at/support/topic/top-menu-with-the-social-icons-bigger?replies=5#post-132320

    Other than that we are trying some other solutions for users with too many menu items or items that are too long but for now the best advice is to just use less main menu items and take better advantage of mega menus since the layout just doesn’t work very well with lots of/long menu items.

    Regards,

    Devin

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • The topic ‘responsive issues with menus and logo’ is closed to new replies.