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


                    #10
                    It was very nice.
                    but I didn't know how to add the ad.

                    Comment


                      #11
                      Has anyone found a way to add banners to this field?

                      Google Translate.

                      Comment


                        #12
                        Just add a wide logo image that spans the width of the header. It's just like uploading a logo as you normally would but only the image is wider than usual.

                        Comment


                        • semihcannet
                          semihcannet commented
                          Editing a comment
                          I was thinking of adding 768x90px adsense code.

                          google translate

                        • glennrocksvb
                          glennrocksvb commented
                          Editing a comment
                          I don't recommend not having an actual logo because that's the identity of your forum. But you could place an adsense ad above the banner logo. If you enable Sitebuilder and click Header, you will see Header Ad HTML Module where you can paste the adsense code.
                      Working...
                      X