modern header without "step"

sconey · July 2015

Hi there,

im using your Modern style Navigation but i would like to remove the designed "Step" to make it look more cleaner.

is there an option?

thenks

Albert · July 2015

Hi,

what you mean when you say "step"? Any screenshot of what you mean?

Thanks!

sconey · July 2015

sure:

http://postimg.org/image/jwg5hdmed/

Albert · July 2015

Ok, got it. Yes, this is possible. You can do this with below css:

#Top_bar .top_bar_right::before {
    top: 0 !important;
    transform: none !important;
    background: #FFF !important;
}

#Top_bar .top_bar_right {
    top: 0px !important;
    background: #FFF !important;
}

sconey · July 2015

wow!

thank you for this fast answer!

As you can see its still a little bit buggy:

http://ck.urbanrelations.de/

as soon as you scroll down it wont look good and also the Mobile version ist not nice now

Albert · July 2015

Ok, got it. Instead of above css, please use below code which works for header which is not sticky and on mobile devices with screens larger then 768px:

@media only screen and (min-width: 768px) {

    #Top_bar:not(.is-sticky) .top_bar_right::before {
        top: 0 !important;
        transform: none !important;
        background: #FFF !important;
    }

    #Top_bar:not(.is-sticky) .top_bar_right {
        top: 0px !important;
        background: #FFF !important;
    }
}

sconey · July 2015

thank you for your fast help.

this is not a solution for me becuase on mobile phones it still looks bad!

http://fs1.directupload.net/images/150722/szdoedun.png

i need to try another option. I could implement it in the normal navigation and edit only the style of that certain menuitem!

do you have any idea?

Albert · July 2015

The only solution we have is move this button up on mobile devices. And this can be done with below css:

@media only screen and (max-width: 767px) { #Top_bar a.button.action_button { top: 10px !important; } }

Please notice that this is the only solution we got in this case.

sconey · July 2015

Thank you,

can i at least center the Button? It feels strange that the Action Button is not optimized for Mobile Screens.

Albert · July 2015

To center top bar stuff, please use Top Bar Icons option under Theme options > Responsive section.

modern header without "step"

Comments