Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • February 12, 2020 at 2:34 am #1183721
    trufflesadmin

    Hi there, I am trying to fit my search input field into my top menu bar, but it is wrapping to the next line after 485 px wide, can you please have a look into this? I have used the child theme and customised the style.css can you please send me your email and I will send you login credentials

    February 12, 2020 at 2:29 pm #1183887
    Rikard

    Hey trufflesadmin,

    Please post a link to where we can see the element in question, and a screenshot or mockup highlighting your intentions.

    Best regards,
    Rikard

    February 13, 2020 at 12:39 am #1184016
    trufflesadmin

    Thanks Rikard, sure will get back to you soon with the details

    February 13, 2020 at 10:39 am #1184095
    trufflesadmin

    Hi Rikard, I have attached a screenshot of the mobile version of the site where you can see the position of the search input field that they want and I have shared the current ip the dev wordpress site. Hope this gives you enough info.

    February 13, 2020 at 8:52 pm #1184300
    Victoria

    Hi trufflesadmin,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
@media only screen and (max-width: 479px) {
.responsive #top #wrap_all #header_meta .container {
  padding-left: 0;
  width: 100%;
  max-width: 100%;
}
 .responsive #top #wrap_all #header_meta.av_secondary_right .sub_menu {
    padding-left: 0;
    width: 100vw;
    float: left;
  }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    February 13, 2020 at 10:10 pm #1184323
    trufflesadmin

    Thanks very much Victoria, that looks alot better when checking on google, still wrapping on some devices will send you screenshot from Huawei P10 now.

    February 13, 2020 at 10:19 pm #1184325
    trufflesadmin

    Hi, I have just attached the screenshot from the P10, also I have noticed after adding the css you suggested there is now a gap between the logo and the top menu bar.

    February 14, 2020 at 5:00 pm #1184569
    Victoria

    Hi trufflesadmin,

    It’s the input field going down and stays above the menu. The code should work on the P10 too, Could you please clear the cache on the mobile device, check again and get back to us.

    Best regards,
    Victoria

    February 14, 2020 at 10:17 pm #1184616
    trufflesadmin

    Hi Victoria, yes I have cleared the cache many times via settings/privacy/clear browsing data/ selected cached images and files and it still displays the same way, any other suggestions?

    February 19, 2020 at 6:02 am #1185908
    Ismael

    Hi,

    Sorry for the delay. Please use this additional css code to align the search field with the menu items in the top header.

    
@media only screen and (max-width: 768px) {
#top #menu-item-search-mobile #searchform {
	background: #ffffff;
	min-width: 184px;
}

.responsive #top #header_meta .sub_menu > ul {
	text-align: left;
}

#top .av_minimal_header #s {
	border: none;
	padding: 1px 2px 1px 1px;
	height: 1.6em;
	top: -3px;
}

#top #searchform > .ajax_search_response {
	position: relative;
	max-width: 300px;
	top: 20px;
	background: #ffffff;
}

#menu-item-search-mobile {
	top: -10px;
}
}

    This is how the header should look afterwards.

    Screenshot: https://imgur.com/a/hQ0UNyv

    Best regards,
    Ismael

    February 19, 2020 at 9:07 am #1185939
    trufflesadmin

    Hi Ismael, I’m sorry but this did not work as planned, I have attached a screenshot, can you please have another look into this?

    Regards

    February 20, 2020 at 10:48 am #1186281
    trufflesadmin

    Hi Ismael – it also made the text in the <h2 class=”post-title entry-title ” itemprop=”headline”> very large as per the attachment. Any other suggestions?

    February 22, 2020 at 11:11 am #1186936
    trufflesadmin

    Hi Ismael, the font size in the h2 class was set incorrectly in the theme, so I have sorted that problem, but I am still struggling with the original issue with the search input placement, do you have any other suggestions?
    Regards

    February 24, 2020 at 3:08 am #1187169
    Ismael

    Hi,

    Sorry for the delay. You can adjust the minimum width of the input field on smaller screens.

    @media only screen and (max-width: 489px) {
    #top #menu-item-search-mobile #searchform {
	min-width: 124px;
    }
}

    We adjusted the value from 184px to 124px.

    If you have any additional questions at this time we kindly ask that you open them up in a separate thread. The longer threads get in the forum, they become more difficult to support as they tend to drift off topic and they also make it troublesome for users trying to search for solutions. Keeping threads relevant to their original inquiry ensures that we can keep better track of what has been resolved and that users can more effectively find answers to similar issues they might be experiencing.

    Thanks!

    Best regards,
    Ismael

    April 10, 2020 at 5:05 am #1202554
    trufflesadmin

    Fixed now thank you for all your help

    Regards
    TA

    April 11, 2020 at 7:00 am #1202840
    Rikard

    Hi,

    Great, I’m glad that you got things working and thanks for the update. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

    April 11, 2020 at 7:23 am #1202844
    trufflesadmin

    Hi Rikard, yes please close this one.

    Kind Regards
    TA

    April 11, 2020 at 4:14 pm #1202942
    Victoria

    Hi trufflesadmin,

    Great :)

    We are closing the thread.

    If you need further assistance please let us know in a new one.
    Best regards,
    Victoria

  • Author
    Posts
Viewing 18 posts - 1 through 18 (of 18 total)
  • The topic ‘How to fit search input field into top menu for mobile’ is closed to new replies.