Fix position of menu / social icons in header

LightHunters

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

Hikin' Mike

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.

LightHunters

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

@LightHunters said:
Hey Mike,



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



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

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;
        }

}   

LightHunters

Thanks a lot Mike, seems to work fine on every resolution :)

JDGS

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

@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.

JDGS

@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.

LightHunters

@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

JDGS

@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