Menu Customization

sarahjhhsarahjhh MarylandPosts: 2Registered Users Beginner grinner
I would like my menu to float around my logo (i.e., half the links on the right and the other half appearing to the left of the logo at the top of the page as you can see currently at : sarahjaneholden/Portfolio). I am having a couple issues achieving this...

(1) I've inserted two menus (one on each side of the logo) which works on laptop and desktop. However, the mobile view is a mess. Once it collapses, you essentially see two menus, which is not what I want. If I don't collapse for mobile view, it also does not look good either. It has been suggested that I should use CSS to make the two menus disappear on mobile view, then insert a third menu for mobile devices (which would disappear on desktops). Suggestions on how to achieve this?

(2) I would like my menu items to appear closer to the center logo. However, when I set the left and right margins for -50 pix on each menu, again....looks good on laptop and desktop monitors. It's a mess on mobile and iPad.
Tagged:

Comments

  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaPosts: 4,299Registered Users Major grins

    You can hide/display different menus....not a problem. You need to create a 3rd menu just for the mobile devices. Once done, you need to know the widget number by viewing the source code (Ctrl+U).

    You'll need to add this to your theme's CSS:

    /**
    * Display Single Menu on Mobile
    ***************************************************/    
    @media only screen and ( max-width: 800px ) {
    
        .sm-user-ui .sm-page-widget-17175008,
        .sm-user-ui .sm-page-widget-17175004 {
            display: none;
            }   
    
    }
    
    /**
    * Display Double Menu on Desktop
    ***************************************************/
    @media only screen and ( min-width: 801px ) {
    
        .sm-user-ui .sm-page-widget-xxxxxxxx {
            display: none;
            }       
    
    }
    

    You need to change the 'xxxxxxx' .sm-user-ui .sm-page-widget-xxxxxxxx to the widget number. That should get you close.

  • sarahjhhsarahjhh MarylandPosts: 2Registered Users Beginner grinner
    Thanks so much for your help. I've searched and searched but cannot seem to find this widget number. I went ahead and added in the new menu...now I just need to find it in the code. No luck so far.
  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaPosts: 4,299Registered Users Major grins
    edited February 1, 2017

    Sorry, I was pressed for time. I use Firebug to show HTML/CSS. In your case you need .sm-page-widget-17190396.

Sign In or Register to comment.