Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • #1183721

    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

    #1183887

    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

    #1184016

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

    #1184095

    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.

    #1184300

    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

    #1184323

    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.

    #1184325

    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.

    #1184569

    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

    #1184616

    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?

    #1185908

    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

    #1185939

    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

    #1186281

    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?

    #1186936

    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

    #1187169

    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

    #1202554

    Fixed now thank you for all your help

    Regards
    TA

    #1202840

    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

    #1202844

    Hi Rikard, yes please close this one.

    Kind Regards
    TA

    #1202942

    Hi trufflesadmin,

    Great :)

    We are closing the thread.

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

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.