Jump to content

Archived

This topic is now archived and is closed to further replies.

icjackson

Need MAJOR Help Fixing a Runaway Search Bar!

Recommended Posts

icjackson+    1
icjackson

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
ellenmva    112
ellenmva

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


Ellen Moore

Pagelines Developer

www.elsue.com www.betterdms.com

Share this post


Link to post
Share on other sites
icjackson+    1
icjackson

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
icjackson+    1
icjackson

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
ellenmva    112
ellenmva

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


Ellen Moore

Pagelines Developer

www.elsue.com www.betterdms.com

Share this post


Link to post
Share on other sites
icjackson+    1
icjackson

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
ellenmva    112
ellenmva

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


Ellen Moore

Pagelines Developer

www.elsue.com www.betterdms.com

Share this post


Link to post
Share on other sites
icjackson+    1
icjackson

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
ellenmva    112
ellenmva

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.


Ellen Moore

Pagelines Developer

www.elsue.com www.betterdms.com

Share this post


Link to post
Share on other sites
icjackson+    1
icjackson

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
ellenmva    112
ellenmva

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


Ellen Moore

Pagelines Developer

www.elsue.com www.betterdms.com

Share this post


Link to post
Share on other sites
icjackson+    1
icjackson

:goodjob:  :goodjob: :goodjob:

 

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

 

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

  • Like 1

Share this post


Link to post
Share on other sites

  • Similar Content

    • Pankaj32
      By Pankaj32
      Hello, my site is looks fine in google chrome however the fonts sizes appear bigger in IE and fire fox. I am using the IE 11 and latest version in mozilla fire fox too. Many sections are also displaying default DMS items in place of whats is actually added in them.
      The site's url  is delhirealestateguy.com . Would appreciate if someone can take a look and advice. Regards, 
    • scswraps
      By scswraps
      Looking to add text links directly below the primary logo on the Business Branding section, is this possible using hooks?
      Thank you.
    • Pankaj32
      By Pankaj32
      Hello, I had scanned through the forum and looks like my question has already been answered in a few threads already but I could not get any of those solutions to work for me. So please bear with me.
      I bought the "business branding section" and now I need to change the title of the font (oswald) and size too. Please let me know what code can I use to achieve this and where exactly am I suppose to paste this code. I had tried to experiment with various codes provided in other threads but none of them seem to make a different after refreshing. 
       
    • sersanet
      By sersanet
      Hello Ellen,
       
      I have just installed the business branding plugin to a new site for a customer..
      www-marbellawordpress.com
       
      For some reason i cannot seem to get the text to appear that has been added to the business branding section, additional business information.
       
      Please would you see your way to helping with this problem.
       
       
      Kind regards..
    • radroz
      By radroz
      Hey Ellen, what would it take to add Pinterest to the Business Branding options?
×