Announcement

Collapse
No announcement yet.

How to move the Search box to the Main navigation bar

Collapse
X
Collapse
First Prev Next Last
  • Filter
  • Time
  • Show
Clear All
new posts

    Official - Free How to move the Search box to the Main navigation bar

    There are cases where you want to add a banner that spans the width of the container. But the Search box on the right gets in the way. You can solve this by modifying the header template but you have to know what you're doing so as not to mess up the template.

    But don't worry, there is a simpler solution to this by simply adding these in css_additional.css template or via Sitebuilder > Style > CSS Editor:

    Code:
    #header { position: relative; }
    #header .header-cell { width: 100%; }
    #header .site-logo, #header .site-logo img { max-width: 100%; } /* makes logo spans the width of the header */
    #header .site-logo { padding: 0; } /* remove padding around the banner logo */
    #header .toolbar {
        position: absolute;
        right: 0; /* for LTR languages (change right to left for RTL; stylevar left/right doesn't work in css_additional) */
        bottom: -29px; /* you may need to adjust this accordingly */
        padding: 0;
        width: auto;
    }
    /* reduce search box width from 168px to 120px or any size if you want */
    .search-container .search-box .search-term { width: 120px; }
    Note:
    If you have a lot of main navigation menu items, the search box may cover them when you shrink the window size until you resize it down further that the Responsive design for mobile screen kicks in and hides the search box and replaces it with the mobile search box. Obviously, the above custom CSS does not take that into account. You could add a CSS Media Query to move the Search box to the sub navigation bar at a certain breakpoint where the Search box obscures the main navigation menu items.

    #2
    Hey (i take a look on all your mods haha)
    Can u give me a link to the Sitebuilder > Style > CSS Editor?

    I cant find it in my Backend

    Comment


      #3
      Sitebuilder is in the front-end. Toggle the Edit Site button at the upper right corner to ON.

      Comment


        #4
        Why i'm so a blindfish thank you. My eyes ignored the "Style" - Button. Now i search for a css to set the image (banners) in the center. (sorry... i'm a noob in programming xD)

        Comment


          #5
          thank you
          works fine on Vb version 5.3.2

          Comment


            #6
            Works GREAT, Thanks very much!
            I just cant figure out how to place the Google adsense code where the search bar used to be?

            Comment


              #7
              You can create a template hook in header_toolbar hook location and then hook it in a new template where you will put the Adsense code. Make sure to enclose the code inside <li></li> tags because the template code will be inserted inside <ul></ul> tags. That's what I did for the Social buttons on this site.

              Comment


                #8
                Thanks very much, I'll figure out how to do that and then add the code. My site looks much better already!

                Comment


                  #9
                  Thanks so much! Works like on charm on 5.3.4 and gives my site a cleaner look already!

                  Comment

                  Working...
                  X