Tagged: , ,

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • November 11, 2013 at 3:50 pm #186880
    erostad

    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

    November 12, 2013 at 1:22 am #187042
    Ismael

    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

    November 12, 2013 at 1:32 pm #187208
    erostad

    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.

    November 12, 2013 at 3:20 pm #187290
    Ismael

    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

    November 12, 2013 at 4:39 pm #187336
    erostad

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

    November 12, 2013 at 11:53 pm #187551
    Ismael

    Hi!

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

    Regards,
    Ismael

    November 13, 2013 at 1:38 am #187581
    erostad

    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

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Search in Responsive Design?’ is closed to new replies.