Fix position of menu / social icons in header

LightHuntersLightHunters Registered Users Posts: 15 Big grins
Hi there!

I redesigned the header of my website ( http://light-hunters.com ), so everything is in one line. I have added a logo, the menu, social icons and a html button for paypal.
Displaying the website on an FHD screen looks great, but if somebody is using a screen with lower resolution, everything gets messed up. The menu gets line breaks, also the social buttons. The paypal button gets cut off screen. This behaviour can also be seen when you simply resize the browser window. While the menu gets line breaks, there is still plenty of space between the menu and the social icons.

Any suggestions on how to fix this? I have contacted SmugMug hero Tom, he recommended to ask you guys here. Thank you all!

Tim

Comments

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins
    edited May 3, 2017

    Remove this:

    .sm-page-layout-region-top .sm-page-widget-nav {
        min-width: 500px;
    }
    

    Remove the max-width: 80%; here:

    .sm-page-widget.sm-page-widget-17956182 .paypal {
        margin: 0 auto;
        max-width: 80%;
        }   
    

    Remove the widget spacer between your menu and the social icons.

    Increase the nav widget's width to 55%.

    Add this to your theme's CSS:

    @media only screen and ( max-width: 1024px ) {
    
        .sm-user-ui .sm-page-layout-region-top .sm-page-layout-row[data-layout-row="B"] .sm-page-layout-column[data-layout-column="0"] {
            width: 15% !important;
            }
    
        .sm-user-ui .sm-page-layout-region-top .sm-page-layout-row[data-layout-row="B"] .sm-page-layout-column[data-layout-column="1"] {
            width: 83% !important;
            }
    
        .sm-user-ui .sm-page-layout-region-top .sm-page-layout-row[data-layout-row="B"] .sm-page-layout-column[data-layout-column="2"], 
        .sm-user-ui .sm-page-layout-region-top .sm-page-layout-row[data-layout-row="B"] .sm-page-layout-column[data-layout-column="3"] {
            width: 50% !important;
            }
    
    }   
    
    

    That should get you close.

    NOTE: There is a bug in the forum's mark-up. The media query is broken.

  • LightHuntersLightHunters Registered Users Posts: 15 Big grins
    Hey Mike,

    thanks for your answer, your code is making the page much better on smaller screens! :smile:

    Is there a way to move the social icons and paypal button a bit more to the right? Or will this mess up the behaviour when displayed on smaller screens?

    Thanks again and best regards,
    Tim
  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins

    @LightHunters said:
    Hey Mike,



    thanks for your answer, your code is making the page much better on smaller screens! :smile:



    Is there a way to move the social icons and paypal button a bit more to the right? Or will this mess up the behaviour when displayed on smaller screens?



    Thanks again and best regards,

    Tim

    Decrease your social icons and paypal button widgets by 5% and add 10% to your menu widget.

  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins
    edited May 3, 2017

    You didn't add the media query to your CSS. There is a bug on the markup, so you need to substitute the (at) with the "at symbol" before the media text.

    (at)media only screen and ( max-width: 1024px ) {
    
        .sm-user-ui .sm-page-layout-region-top .sm-page-layout-row[data-layout-row="B"] .sm-page-layout-column[data-layout-column="0"] {
            width: 15% !important;
            }
    
        .sm-user-ui .sm-page-layout-region-top .sm-page-layout-row[data-layout-row="B"] .sm-page-layout-column[data-layout-column="1"] {
            width: 83% !important;
            }
    
        .sm-user-ui .sm-page-layout-region-top .sm-page-layout-row[data-layout-row="B"] .sm-page-layout-column[data-layout-column="2"], 
        .sm-user-ui .sm-page-layout-region-top .sm-page-layout-row[data-layout-row="B"] .sm-page-layout-column[data-layout-column="3"] {
            width: 50% !important;
            }
    
    }   
    
  • LightHuntersLightHunters Registered Users Posts: 15 Big grins
    Thanks a lot Mike, seems to work fine on every resolution :)
  • JDGSJDGS Registered Users Posts: 34 Big grins
    edited May 9, 2017
    Tim could you please post here the complete coding you used to put everything in one line? I already searched everywhere but I couldn't find it. Thanks :)
  • Hikin' MikeHikin' Mike Registered Users Posts: 5,448 Major grins
    edited May 9, 2017

    @JDGS said:
    Tim could you please post here the complete coding you used to put everything in one line? I already searched everywhere but I couldn't find it. Thanks :)

    There is no special code to just put your logo, menu and social icons on one line. Just move the menu and social blocks next to the logo block. You should set the containers' width to something like 15%/70%/15% (logo/menu/social). You may need to adjust them for different devices. If you need help with that, then just post your question in a new thread.

  • JDGSJDGS Registered Users Posts: 34 Big grins

    @Hikin' Mike said:

    @JDGS said:
    Tim could you please post here the complete coding you used to put everything in one line? I already searched everywhere but I couldn't find it. Thanks :)

    There is no special code to just put your logo, menu and social icons on one line. Just move the menu and social blocks next to the logo block. You should set the containers' width to something like 15%/70%/15% (logo/menu/social). You may need to adjust them for different devices. If you need help with that, then just post your question in a new thread.

    Ok Mike, I'll try to do it. Thanks for the advice.

  • LightHuntersLightHunters Registered Users Posts: 15 Big grins

    @JDGS said:

    @Hikin' Mike said:

    @JDGS said:
    Tim could you please post here the complete coding you used to put everything in one line? I already searched everywhere but I couldn't find it. Thanks :)

    There is no special code to just put your logo, menu and social icons on one line. Just move the menu and social blocks next to the logo block. You should set the containers' width to something like 15%/70%/15% (logo/menu/social). You may need to adjust them for different devices. If you need help with that, then just post your question in a new thread.

    Ok Mike, I'll try to do it. Thanks for the advice.

    Sorry for not answering, good we have somebody like @Hikin' Mike here :)

  • JDGSJDGS Registered Users Posts: 34 Big grins

    @LightHunters said:

    @JDGS said:

    @Hikin' Mike said:

    @JDGS said:
    Tim could you please post here the complete coding you used to put everything in one line? I already searched everywhere but I couldn't find it. Thanks :)

    There is no special code to just put your logo, menu and social icons on one line. Just move the menu and social blocks next to the logo block. You should set the containers' width to something like 15%/70%/15% (logo/menu/social). You may need to adjust them for different devices. If you need help with that, then just post your question in a new thread.

    Ok Mike, I'll try to do it. Thanks for the advice.

    Sorry for not answering, good we have somebody like @Hikin' Mike here :)

    No problem. True, especially when using CSS, it's difficult for me xD

Sign In or Register to comment.