Menu Customization

sarahjhh · January 31, 2017

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.

Hikin' Mike · January 31, 2017

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.

sarahjhh · February 1, 2017

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' Mike · 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.

Menu Customization

Comments