(m)Social FIXED TOPBAR AND MENU LIKE CloudHost Template

Hi everyone,

Is there a way to create a fixed top bar and fixed menu in the (m)social template, like cloud host template.

CloudHost have a topbar module position above the logo and mainmenu position,and (m)social template haven't

How to add such position?

Should i have to add some code in one of the file (in templates\gk_msocial\layouts)?
Is there a way to have the menu (logo + main menu) in full width of the screen and in a fixed way , so the rest of the page scrolls under?

Thanks for your help

Hello,

Please try to add the following CSS code in the css/template.css file:

Code: Select all

#gkTop {
position: fixed;
z-index: 1;
margin: 0;
left: 0;
}
#gkTop + .box {
padding-top: 62px;
}

Hello,

Is it also posible to fix the topbar and keep the width of the page instead of the width of the browser-window?
Thanks in advance for any help.

@StudioThijssen - you can try to use:

Code: Select all

#gkTop {
    left: 50%;
    max-width: 1280px;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 100%;
}

You can adjust max-width: 1280px to your template width.

Thanks. Position is perfect.
But when I scrolldown the page content scrolls over the topbar, not 'underneath'.
Any tips for that?

Could you provide me an URL to your website with this issue?

Please add also z-index: 1000; to the element positioned as fixed - it will solve your issue.

Perfect. Thanks!!

Could you tell mee what the code, z-index, do exactly?

z-index is a CSS property responsible for the layers positioned relatively, fixed or absolutely.

Great post ! But please support us make the Fixed header not to apear when scrolling down, and make it show when it stop from scroll up. Like http://www.gavick.com website !

@nadgob - sorry but implementing this kind of feature is definitely beyond of our technical support.

it is somthing like that http://jsfiddle.net/mariusc23/s6mLJ/31/ . can You advice more how to implement on template ?

After I fixed the top, how can I make the rest of the layout position to start not under (behind) fixed top bar and just hereunder ! ... now the fixed top covers the rest.
P.S. keep in mind the mobile view not only the descktop.

Please advice.

anybody here ? hello ...