Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #186880

    Is it possible to somehow include the Ajax search feature within responsive design at the very top of the page? Is there a way this could either be added as a search bar at the very top of the page or at least show the icon in the breadcrumb area?

    Thanks

    #187042

    Hi erostad!

    You can add this on your custom.css or Quick CSS:

    @media only screen and (max-width: 767px) {
    .responsive #header .main_menu ul,  .responsive #header .main_menu ul {
    display: block !important;
    position: absolute;
    background: none;
    top: -100px;
    right: 0;
    }
    
    .responsive #header .main_menu ul li {
    display: none;
    }
    
    .responsive #header .main_menu ul li:last-child {
    display: block !important;
    }
    }

    Best regards,
    Ismael

    #187208

    Hello Ismael,

    Thank you for the response, but that did not add a search bar at the top of the page on an iPhone or iPad. Do I need to add any additional code there?

    Thanks.

    #187290

    Hey!

    What type of header do you have? Please adjust the top margin.

    @media only screen and (max-width: 767px) {
    .responsive #header .main_menu ul,  .responsive #header .main_menu ul {
    display: block !important;
    position: absolute;
    background: none;
    top: -20px;
    right: 0;
    }
    
    .responsive #header .main_menu ul li {
    display: none;
    }
    
    .responsive #header .main_menu ul li:last-child {
    display: block !important;
    }
    }

    Remove browser cache then reload the page.

    Regards,
    Ismael

    #187336

    I am using the small fixed header. Do I need to use different code for that one?

    #187551

    Hi!

    No, you don’t. Please use the one above. Remove browser cache then reload the page.

    Regards,
    Ismael

    #187581

    Ok – I see what was happening. I had conflicting code in custom css from a previous question I had for you. This was the conflicting code:

    @media only screen and (max-width: 989px) { .fixed_header.social_header #main { padding-top: 0!important; } }

    I just changed the code you listed above to 989px and then removed the code I have listed right above and that seems to have fixed it.

    Thanks – Erik

Viewing 7 posts - 1 through 7 (of 7 total)

The topic ‘Search in Responsive Design?’ is closed to new replies.