Jump to content
Dan007007

Search Bar

Recommended Posts

Hi, I have no web developer i sacked him! I can do basics, one thing i can't seem to do is on my website if you make the screen you are looking at small the search bar moves out of the place it is meant to be and goes over items below but it is not very visible there, the code I have is below.

 <div class="container">
        <div class="home_search">
            <h1>Search <%=siteName%></h1>
            <form id="search_form" action="<%=absolutePath%>search" method="get">
            <input type="text" class="search_box" name="keyword" value="<%=lcase(keyword)%>" placeholder="Search item number, brand or keyword" />
            <button class="search_btn" type="submit">Search</button>
            </form>
            <div class="recent_searches">
                <div class="recent_header">Recent Searches:</div>
                <%
                if not rstemp.eof then
                do while not rstemp.eof
                %>
                <a href="<%=absolutePath%>search?keyword=<%=replace(rstemp("keyword")," ","+")%>"><%=makeFriendly(pcase(rstemp("keyword")))%></a>
                <%
                rstemp.movenext
                loop
                end if
                %>
            </div>
        </div> 

Share this post


Link to post
Share on other sites

As I'm new that all looks like Japanese to me, sorry. Can i ask you to put my website on your browser and make minimise the page more and more, you will see what I mean, I'll add a picture here if it lets me. Thanks for replying though, very good of you. It looks bad on mobiles also because screens are small.

 

search bar moving.jpg

search bar moving bad.jpg

Share this post


Link to post
Share on other sites

Normally the logo would be stacked at top and hamburger menu usually only appears on smaller devices (in place of desktop hover over dropdown menu) to give extra room for remaining features. Has this hb menu always been viewable what ever device size?

Share this post


Link to post
Share on other sites

it has been like this for ages, any chance you could write a code I can try?? I can get the code there at the moment, maybe you could modify it, don'y worry i know how to change back if it goes wrong.

Edited by Dan007007

Share this post


Link to post
Share on other sites

Place this just before /* Resize general elements to Media */ in general.css file

header .search {
    width: 38%;
}

header .search input {
    width: calc(95% - 75px);
}

header .search button {width: 75px;}

Place this after /* Resize general elements to Media */

@media only screen and (min-width:380px) and (max-width:768px) 
{
body header .search {width: 55%;}
    
    .side_nav + header {
        height:auto;
    }
  header .logo {
    float: none;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    clear:both;
    width:100%;
 
    }

header .logo a {
    float: none;
    margin:0 auto;
}

main {padding-top: 60px;}
}

 

Share this post


Link to post
Share on other sites

I'm practising on my other website now as it is not very busy, jusy in case customers keep seeing screen move!. 

Same coding, so I did below this time, even changed both of these top and bottom.@media only screen and (min-width:380px) and (max-width:768px)

 

@media only screen and (min-width:380px) and (max-width:768px)
{
    .modal { width:98%; }

    header .search input { font-size:22px; width:80%; }
    header .search button { font-size:22px; }

    #breadcrumb { display:none; }
    nav.side_nav { width:100%; }
    .container { width:98%; }
    footer .footer .footer_box_wide { display:none; }  
    footer .footer .footer_box { width:98%; margin:0 0 10px 1% }
    main .top_search input { font-size:22px; width:80%; }
    main .top_search button { font-size:22px; }
    footer .footer div.footer_cards img { width:100%; }

@media only screen and (min-width:650px) and (max-width:1024px) 
{
    header .search input { font-size:26px; width:80%; }
    header .search button { font-size:26px; }

    #breadcrumb { display:none; }
    .container { width:98%; }
    footer .footer .footer_box_wide { display:none; }  
    footer .footer .footer_box { width:48%; }
        main .top_search input { font-size:26px; width:80%; }
        main .top_search button { font-size:26px; }
    footer .footer div.footer_cards img { width:90%; }

@media only screen and (min-width:380px) and (max-width:768px)

Share this post


Link to post
Share on other sites

I tested my code again! and it worked fine. It set the size of button to a size that will not shrink to a size smaller than the text. The input allows for size of the button to fit in available width. The logo goes to top and nav bar extends to size of content  enveloping logo at top and input, search button, menu button and cart.

Share this post


Link to post
Share on other sites

I found the general css file, changed it as dsonesuk said, I'm getting there, still not quite there though and now on my mobile it has a mysterious red line under my shophere.co.uk logo (I'm practising on shophere as not my busy website) 

shophere changes on search bar.jpg

Share this post


Link to post
Share on other sites

it still jumps off the main blue part when i minimise or adjust desktop screen size, but not as bad, I must need one other little change i'm missing ?.

/* Resize general elements to Media */
@media only screen and (max-width:475px) 
{
    .modal { width:98%; }
    header { height:121px; }
        header .logo { float:left; border-bottom:1px solid #D25A1E; height:60px; width:100%; margin:0; display:block; text-align:center; }
            header .logo a { width:100%; height:60px; display:block; background-position:center center; } 
            header nav.main_nav { width:32%; float:left; }
                
            header .search { position:relative; width:40%; float:left; margin-left:2px; }
            header .search input { width:80%; font-size:12px; }
            header .search button { width:40%; font-size:11px; }
        
            header .trolley { }
    main { border-top:121px solid #F5F5F5; }
    #breadcrumb { display:none; }
    nav.side_nav { width:100%; }
    .container { width:98%; }
    footer .footer .footer_box_wide { display:none; }  
    footer .footer .footer_box { width:96%; margin:0 0 10px 2%; }
    main .top_search { top:121px; }
        main .top_search input { font-size:18px; width:65%; }
        main .top_search button { font-size:18px; }
    footer .footer div.footer_cards img { width:100%; }


                
@media only screen and (min-width:475px) and (max-width:650px) 
{
    .modal { width:98%; }

    header .search input { font-size:22px; width:80%; }
    header .search button { font-size:22px; }

    #breadcrumb { display:none; }
    nav.side_nav { width:100%; }
    .container { width:98%; }
    footer .footer .footer_box_wide { display:none; }  
    footer .footer .footer_box { width:98%; margin:0 0 10px 1% }
    main .top_search input { font-size:22px; width:80%; }
    main .top_search button { font-size:22px; }
    footer .footer div.footer_cards img { width:100%; }

@media only screen and (min-width:650px) and (max-width:1024px) 
{
    header .search input { font-size:26px; width:80%; }
    header .search button { font-size:26px; }

    #breadcrumb { display:none; }

Share this post


Link to post
Share on other sites

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Is a old unused doctype any html5 tags css3 css styling won't work as they should, you also have multiple html,body, head, title opening/closing tags to name few, that! are not allowed. I can't provide a solution for such invalid broken html code. Copy source code and paste in direct input tab at https://validator.w3.org/

and correct the errors.

https://www.w3schools.com/html/default.asp

Show the correct doctype and required attributes to allow nav, header, footer tags showed as invalid tags in valdator using transitional doctype.

Edited by dsonesuk

Share this post


Link to post
Share on other sites

I'll try a few things, but I'm not great and the guy that made this custom site did it bad I know. I'm thinking about starting over one day, what would you say is any good, would wordpress and woocommerce be any good or is Microsoft any better was asp.net core 3.0, I'm open to suggestions and you guys know your stuff!

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...