Support » Theme: YITH Proteo » How can I activate the fixed headend for mobile phones

Viewing 5 replies - 1 through 5 (of 5 total)
  • Theme Author YITHEMES


    Hi there,
    the fixed header automatically disable on mobile devices to give more screen area to the website navigation.
    You can enable it by adding few lines of additional CSS to your theme CUstomize > Additional CSS

    @media (max-width: 991.98px) {
    body .site-header.sticky {
        position: fixed;

    This will do the trick for you as long you have the sticky header option enabled πŸ˜‰

    Thread Starter brodward


    Hi, it worked perfect!
    Could you tell me how to hide the username when they are logged in?
    but we only want to hide the username in the mobile view so that the login icon does not scroll and always stays aligned in the same row with the logo


    Theme Author YITHEMES


    Hi again, sure. Use this code:

    @media (max-width: 991.98px) {
        body a.yith-proteo-user-welcome-message span{
        display: none;

    It should work as you expected to πŸ™‚

    If you like Proteo and way we work, please help us with a nice review πŸ™‚

    Thread Starter brodward


    Thanks, it worked
    Two more questions:
    1 How can I change the search icon?
    2 When I click on the search icon, a screen opens
    with the search box and it is displayed in the center of the screen, how can I move it so that it is displayed at the top and not in the center?

    Thank you very much for the help

    Theme Author YITHEMES


    Hi again!

    1) The search icon can be changed with a bit of CSS code.
    The original CSS code is:

    #topbar .widget_search:before, .header-sidebar .widget_search:before {
        content: "ξ‘―";
        display: inline-block;
        font-family: Linearicons-Free;
        speak: none;
        font-style: normal;
        font-weight: 400;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        font-size: 1.6rem;
        cursor: pointer;
        margin-right: 5px;

    so basically you can change everything you need from the code above, like adding a background image (the icon) and replace the content with ” to non display the old icon.
    Your updated code needs to be added to the theme customizer, this will overwrite the original one.

    2) You can use the following additional CSS to do that:

    #full-screen-search form > div {
        top: 100px;

    I hope you will appreciate it πŸ™‚

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘How can I activate the fixed headend for mobile phones’ is closed to new replies.