Jump to content


Photo
Business Branding

Need MAJOR Help Fixing a Runaway Search Bar!



Best Answer ellenmva , 13 September 2013 - 04:34 PM

Try this,

 
#page .section-business-branding .business-info {
margin-top: -12px;
}

The #page will overwrite the margin-top set by business branding so you don't need to use !important to get it working.

 

Just adjust the margin to what you need it to be.

 

Ellen

Go to the full post


  • Please log in to reply
11 replies to this topic

#1 icjackson

icjackson

    Advanced Member

  • Members
  • 86 posts
  • Country: Country Flag

Posted 10 September 2013 - 03:39 PM

Hey gang,

 

I am using last version of Framework and have customized the Business Branding plugin to my liking except for one glitch; the search bar doesn't behave like it should.

 

I put a custom menu in the Branding Area Extras section and a search bar next to the social icons in the Additional Business Information section and added some @media CSS to make it responsive...and it works out well most of the time. There are some screen dimensions in which the search bar went to a weird or silly place, but the occurrances of that were minimal enough so I let it be...until I found out that it does not behave properly AT ALL in Safari! The search bar appears on top of the menu in Safari! All that maneuvering and now Safari is making my life harder :-(

 

URL: http://johaneric.com/test/

 

Here is the related custom CSS:

 
@media only screen and (max-width : 800px),
only screen and (max-device-width : 800px){
   .section-business-branding .searchform {
      width: 100%;
      position: relative !important;
      margin: 0 !important;
      padding: 0 !important;
      z-index: 7;
    }
}
  
@media only screen and (max-width : 800px),
only screen and (max-device-width : 800px){
    .nav_social_icons {align: left;}
  }
  
  .section-business-branding .searchform {
    position: absolute !important;
    margin-top: 31px;
    padding-left: 19% !important;
    z-index: 1 !important;
  }
  .nav_social_icons {align: right;}
  
#page .section-business-branding .business-info {width: 100px;}
#page .section-business-branding .branding-area {width: 690px;}

I do know that I have some Hail Mary z-indexes in there that may be doing nothing at all, but they made me feel better at the time, lol. Just copied and pasted the code as is. 

 

What can I do to make this right? The search bar moves as you reduce device or browser window size, sometimes not in the best way. I figure whatever has Safari's drawers in a bunch, if that was fixed then the other undesirable placement would resolve itself as well.

 

 

HELP!!!

 

 

-fin-



#2 ellenmva

ellenmva

    Advocate

  • Members

  • 356 posts
  • LocationMassachusetts
  • Country: Country Flag

Posted 10 September 2013 - 04:38 PM

@icjackson Okay, I played with it a bit.

 

Try changing the .section-business-branding .searchform code to:

 
body .section-business-branding .searchform {
margin-top: 31px;
float: right;
right: 20%;
}

See if that helps.

 

Ellen



#3 icjackson

icjackson

    Advanced Member

  • Members
  • 86 posts
  • Country: Country Flag

Posted 10 September 2013 - 05:32 PM

Thanks, Ellen.

 

The change moved it up and to the left (all browsers).

 

:'(

 

searchform.jpg



#4 icjackson

icjackson

    Advanced Member

  • Members
  • 86 posts
  • Country: Country Flag

Posted 10 September 2013 - 05:52 PM

Correction: All PC browsers. It actually did move it over in Safari! It is in the same place in Safari as it is in the PC browsers, but at least they are all the same now :-)

 

So that's progress. Now, how do I get it to where it should actually sit?

 

 

Thank you for your help so far :-D



#5 ellenmva

ellenmva

    Advocate

  • Members

  • 356 posts
  • LocationMassachusetts
  • Country: Country Flag

Posted 10 September 2013 - 10:44 PM

Sorry, was offline for a bit. Did you change it back? I can't work with it without seeing the code live.

 

Also, it looks like you put the searchbox in with a hook cause it is not within a div (looking at the code the hook falls outside of the business-info div). Maybe if you but a div around it like <div class="my-searchbox">..</div> that mightmake it easier to style.

 

Ellen



#6 icjackson

icjackson

    Advanced Member

  • Members
  • 86 posts
  • Country: Country Flag

Posted 11 September 2013 - 04:15 AM

Hi Ellen,

 

I did change it back. So, I'll change it BACK so you can work with it :-)

 

And I did neglect to post the action I added! My bad. Here it is (added using Pagelines Customize):

 
add_action('pagelines_before_branding_icons', 'new_search');

function new_search(){
get_search_form();
}

Hope this helps :-)



#7 ellenmva

ellenmva

    Advocate

  • Members

  • 356 posts
  • LocationMassachusetts
  • Country: Country Flag

Posted 11 September 2013 - 01:14 PM

Okay, let's change the action to put the search inside the icons div. Change it to 

 
add_action('pagelines_branding_icons_start', 'new_search');

Remove the styling on the search box and then add this styling.

 
.icons .searchform {
top: 12px;
}

Let me know how that works.

 

Ellen



#8 icjackson

icjackson

    Advanced Member

  • Members
  • 86 posts
  • Country: Country Flag

Posted 12 September 2013 - 05:12 PM

Hi Ellen,

 

It places the search box on top of the icons, and unfortunately, that is not acceptable. I HAVE to be able to place the search box next to them. No matter what kind of styling I add, the icons appear on a line below the search bar. I think that was why I changed the action to what it was in the first place; I think I remember seeing another forum post in which someone offered that action as a solution but disclosed that the search bar would not appear on the same line as the icons? 

 

I wrote this code a few months ago, so I don't remember. But that is where I am now. Needing the search bar to be next to the icons. Can you do it with the current action? I know that if it is possible, that would be the best solution for all screens and devices...but is it possible?



#9 ellenmva

ellenmva

    Advocate

  • Members

  • 356 posts
  • LocationMassachusetts
  • Country: Country Flag

Posted 12 September 2013 - 07:37 PM

Looks like you forgot to add the css for the top. But looking at the site this is what worked

 
.icons .searchform {
top: 24px;
}

If you need to be more specific just put in .section-business-branding in front of the code.



#10 icjackson

icjackson

    Advanced Member

  • Members
  • 86 posts
  • Country: Country Flag

Posted 13 September 2013 - 12:33 AM

Sorry about that; I copied and pasted the code as you suggested, but then changed it to play with it. I had the problem both time, but forgot to put it back in case you looked at it.

 

Adding the .section-business-branding in front of the code made a difference, but now I have new problem. The following code places the search bar and the icons on the same line:

 
.section-business-branding .icons .searchform { 
top: 32px;
right: 150px;
bottom: -80px;
}

However, I can't get this line to go up and sit where it should be, in line with the navigation. I can move the search bar around, but no matter where it goes, the icons will not move any higher than right below where it should be. If the code is this, then the search bar sits in line with the navigation, but the icons appear on the line underneath:

 
.section-business-branding .icons .searchform { 
right: 150px;
}

I can't do ANYTHING to get the icons to move any higher than they appear with the above code. 

 

 

Got any suggestions?



#11 ellenmva

ellenmva

    Advocate

  • Members

  • 356 posts
  • LocationMassachusetts
  • Country: Country Flag

Posted 13 September 2013 - 04:34 PM   Best Answer

Try this,

 
#page .section-business-branding .business-info {
margin-top: -12px;
}

The #page will overwrite the margin-top set by business branding so you don't need to use !important to get it working.

 

Just adjust the margin to what you need it to be.

 

Ellen



#12 icjackson

icjackson

    Advanced Member

  • Members
  • 86 posts
  • Country: Country Flag

Posted 15 September 2013 - 08:41 AM

:goodjob:  :goodjob: :goodjob:

 

THANK YOU!!! **does happy dance**

 

Just brilliant. Exactly what I needed. Thanks for your great section and all your help! 


  • ellenmva likes this





Also tagged with one or more of these keywords: Business Branding