Login Bar

How do I move the login bar at the top of the template on layout mobile.

Hi

Please add this code to mobile.css

Code: Select all

body #gkPage {
    margin-top: 40px !important;
}

#gkTopBarUsermenu > ul > li {
    position: fixed;
    top: 0;
}


Hi. Sorry teitbite but it doesn't seem to be that simple?

I'm also trying to move the top navigation bar to the top of screen in mobile/tablet view. The Top Nav bar appears just fine on most tablets (tested on iPad & Android) in landscape mode (the same view as desktop) but in portrait mode or on a mobile device (where you have the mobile menu), the Top Nav bar drops to the bottom of the screen. I don't think that's meant to happen is it? Try the Gavick demo of this template and you'll see what I mean.

I thought I'd be able to fix it with some basic overrides in the override.css (as I don't want to have to fix it every time I upgrade the template) however this is not proving to be so simple?

Looking further into the CSS, I see there is LOTS of fixes for gkTopBar & gkTopBarUsermenu in both the template.css and also in tablet.css

This is in template.css

Code: Select all

/* fix for the tablets */
body[data-tablet="true"] #gkTopBar {
   height: auto!important;
   min-height: 40px!important;
   overflow: hidden;
   position: static!important;
   width: auto!important;
}
body[data-tablet="true"] #gkTopBar > div > nav {
   float: right!important;
}
body[data-tablet="true"] #gkTopBar nav#gkTopBarUsermenu {
   clear: both;
   float: left!important;
}
body[data-tablet="true"] #gkTopBarUsermenu,
body[data-tablet="true"] #gkTopBarUsermenu ul,
body[data-tablet="true"] #gkTopBarUsermenu ul > li {
   width:100%;
}
body[data-tablet="true"] #gkTopBarUsermenu ul > li a,
body[data-tablet="true"] #gkTopBarUsermenu ul > li span {
   float: none!important;
   padding: 0!important;
   text-align: center!important;
   width:100%;
}
body[data-tablet="true"] #gkTopBarUsermenu ul ul {
   display: none!important;
}

and this is in tablet.css

Code: Select all

/* topbar */
#gkTopBar {
   height: auto!important;
   min-height: 40px!important;
   overflow: hidden;
   position: static!important;
   width: auto!important;
}

etc, etc, etc... and then again....

/* topbar */
#gkTopBar > div > nav {
   float: right!important;
}
#gkTopBar nav#gkTopBarUsermenu {
   clear: both;
   float: left!important;
}
#gkTopBarUsermenu,
#gkTopBarUsermenu ul,
#gkTopBarUsermenu ul > li {
   width:100%;
}
#gkTopBarUsermenu ul > li a,
#gkTopBarUsermenu ul > li span {
   float: none!important;
   padding: 0!important;
   text-align: center!important;
   width:100%;
}
#gkTopBarUsermenu ul ul {
   display: none!important;
}

If I add this CSS below to override.css, it does sort of fix the problem on tablets but not on mobile view? And of course, it also chews up the top 125px of the screen which is not too good....?

/* Top Bar Navigation for Mobile & Tablet */
body[data-tablet="true"] #gkPage {
margin-top: 125px !important;
}

body[data-tablet="true"] #gkTopBar {
height: auto !important;
position: fixed !important;
width: 100% !important;
}

Could you possibly assist please with the best method to move the Top Nav bar to the top of screen in mobile & tablet view with override.css? Thanks.

Hi

Sure. Please show me Your site so I'll see what You've done so far and adjust a code to it.

Thanks for the offer teitbite, much appreciated, but site is not live yet. I spent a bit more time and have actually solved everything so the Top Nav bar appears just as I like it.

I see others have asked the same question on this forum, so below is what worked for me. Hope it might help someone else. Please feel free to correct me if I've got it wrong.

For Tablets - to move Top Nav bar to the top of page (fixed) and style same as Desktop.
1. Remove ALL reference to the #gkTopBar from the tablet.css (from line 259 down)
2. Remove ALL reference to the #gkTopBar from the template.css (from line 1065 down)
3. Add this to override.css (make sure you have override.css activated in template config)

Code: Select all

/* Top Bar Navigation for Mobile & Tablet */
body[data-tablet="true"]  #gkPage {
margin-top: 40px !important;
}
body[data-tablet="true"] #gkTopBar {
height: auto!important;
position: fixed !important;
width: 100% !important;
}

For Mobile - this will place the Top Nav bar at the top of page (fixed) but will only display social Icons in the bar as there's not enough room to display the menus. You might want to fiddle with this if you'd like to include your User menu?
1. Add this to mobile.css

Code: Select all

/* Top Nav Bar fix to top */
body #gkPage {
    margin-top: 40px !important;
}
body #gkTopBar {
height: auto!important;
position: fixed !important;
width: 100% !important;
}
#gkTopBar ul li a {
display: none !important;
}
#gkTopBarUsermenu > ul > li > a {
display: none !important;
}

Hi

Great. Thank You for this detailed explanation. It will help some people for sure