• 0
Sign in to follow this  
Followers 0

Business Branding Need MAJOR Help Fixing a Runaway Search Bar!

Question

Posted · Report post

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-

Share this post


Link to post
Share on other sites

11 answers to this question

  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks, Ellen.

 

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

 

:'(

 

searchform.jpg

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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 :-)

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

:goodjob:  :goodjob: :goodjob:

 

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

 

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

1 person likes this

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0