Tagged: 

Viewing 21 posts - 1 through 21 (of 21 total)
  • Author
    Posts
  • #10970

    Hi I would like to be able move the social/search bar to the very top header as shown in the following image:

    Header.jpg

    Thanks,

    Chris Lillis

    #70029

    Hi,

    Edit your header.php and look for 1st <div class=’container’>, add this line below.

    <div class="search-form-header">
    <?php get_search_form(); ?>
    </div>

    Then visit your custom.css and add this line.

    .search-form-header {
    position: absolute;
    top: 10px;
    right: 0px;
    }

    Hope this helps. :)

    Regards,

    Ismael

    #70030

    Sorta, but the formatting isn’t being applied and I would like both the search and social bar moved to the header while retaining their existing formatting.

    Thanks,

    Chris Lillis

    #70031

    Hi,

    Kindly undo my previous instructions and edit your template-blog.php and find:

    Code:
    avia_title($t_link);

    And replace it with this:

    Code:
    avia_title($t_link, ”, false);

    -> This code removes the search and social besides the Blog – Latest News in the blog page.

    Then edit your functions.php, go to last line and paste this code:

    Code:
    if(!function_exists(‘mod_avia_search’))
    {
    function mod_avia_search()
    {
    echo ‘<div class=”mod-search”>';
    echo get_search_form();
    echo ‘<ul class=”social_bookmarks”>';
    if($dribbble = avia_get_option(‘dribbble’)) echo “<li class=’dribbble’>“.__(‘Follow us on dribbble’, ‘avia_framework’).”“;
    if($twitter = avia_get_option(‘twitter’)) echo “<li class=’twitter’>“.__(‘Follow us on Twitter’, ‘avia_framework’).”“;
    if($facebook = avia_get_option(‘facebook’)) echo “<li class=’facebook’>“.__(‘Join our Facebook Group’, ‘avia_framework’).”“;
    echo ‘ <li class=”rss”>RSS‘;
    echo ‘</div>';
    }
    }

    ->This code creates a function that generates the search and social icons structure.

    Then edit your header.php and find:

    Code:
    echo avia_logo(AVIA_BASE_URL.’images/layout/logo.png’);

    Add this code below it:

    Code:
    mod_avia_search();

    ->This code places the search and social icons to the header.

    Then add this code to your custom.css:

    Code:
    #header > .container {
    padding-bottom: 60px;
    }
    .mod-search > #searchform {
    position: absolute;
    right: 0;
    top: 125px;
    }
    .mod-search > ul.social_bookmarks {
    top: 133px!important;
    }

    ->This code fixes the position of the search and social icons on the header.

    This instruction is quite lengthy but hopefully this should work. :)

    Best Regards,

    Ismael

    #70032

    I’m not getting the social media graphics to load. Also, the search bar and social logos are showing up in the portfolio, contact and dynamic template pages. I’ve been editing code here and there but don’t think my changes should have affected this area. Can you take a look at my demo site and verify the code you provided is not to blame? Thanks in advance.

    http://christiepits.com/wordpress/contact/

    #70033

    Hi,

    In your functions.php change the code above to this:

    Code:
    if(!function_exists(‘mod_avia_search’))
    {
    function mod_avia_search()
    {
    echo ‘<div class=”mod-search”>';
    echo get_search_form();
    echo ‘<ul class=”social_bookmarks”>';
    if($dribbble = avia_get_option(‘dribbble’)) echo “<li class=’dribbble’><a** href=’http://dribbble.com/”.$dribbble.”‘>”.__(‘Follow us on dribbble’, ‘avia_framework’).”</a**>”;
    if($twitter = avia_get_option(‘twitter’)) echo “<li class=’twitter’><a** href=’http://twitter.com/”.$twitter.”‘>”.__(‘Follow us on Twitter’, ‘avia_framework’).”</a**>”;
    if($facebook = avia_get_option(‘facebook’)) echo “<li class=’facebook’><a** href='”.$facebook.”‘>”.__(‘Join our Facebook Group’, ‘avia_framework’).”</a**>”;
    echo ‘ <li class=”rss”><a** href=”‘.avia_get_option(‘feedburner’,get_bloginfo(‘rss2_url’)).'”>RSS</a**>';
    echo ‘</div>';
    }
    }

    Its weird that the [a] tags I put on the code were gone. :( Sorry about that. Just remove the ** in the code(if I try to remove that some code will be missing, so just replace it on your end after you pasted the code).

    And in your custom.css change it to this:

    Code:
    .mod-search > #searchform {
    position: absolute;
    right: 0;
    top: 40px;
    }
    .mod-search > ul.social_bookmarks {
    top: 48px!important;
    }

    Hope this helps. :)

    Best Regards,

    Ismael

    #70034

    Thanks! This is moving it forward but the custom css doesn’t see to affect positioning. Search bar just resting up against the logo. I also need help removing the search/social instance on the pages that don’t use the default layout like dynamic template pages and portfolio template pages. You can see what I mean at the address I provided. Search/social showing up twice.

    #70035

    Hi,

    In your custom.css replace the code I have given you with this code:

    Code:
    .main_menu {
    position: absolute!important;
    right: 0;
    top: 100px;
    }
    .mod-search > ul.social_bookmarks {
    position: absolute!important;
    right: 225px;
    }
    div.title_meta > #searchform,
    div.title_meta > ul.social_bookmarks {
    display: none;
    }

    This code also removes search and social icons showing in its original position(showing twice). Hope this helps. :)

    Best Regards,

    Ismael

    #70036

    The code did not remove the original search and social icons. And the new search/social is scrambled in the header file. Other thoughts? Thanks for sticking with this!

    #70037

    Hi,

    I checked your site(using firebug) and I haven’t found the code I have given you above. Can you try to put in either in Quick CSS or custom.css.

    Best Regards,

    Ismael

    #70038

    So far everything is working as expected, except now the responsive design of the website is broken.

    See http://dev.hvs.on.ca

    I also had to tweak the CSS a bit to get the styling of the search bar correct.

    #header > .container {
    padding-bottom: 60px;
    }
    .mod-search > #searchform {
    position: absolute;
    right: 0;
    top: 40px;
    }
    .mod-search #s {
    background-color: #DFE6F0;
    }
    .mod-search #searchsubmit {
    background-color: #DFE6F0;
    }

    .mod-search > ul.social_bookmarks {
    top: 48px!important;
    }

    Its also broken in IE9 :(

    #70039

    Hi,

    I noticed that the search button overlapped. Try to replace this code:

    Code:
    .mod-search #searchsubmit {
    background-color: #DFE6F0;
    }

    with this:

    Code:
    .mod-search #searchsubmit {
    background-color: #DFE6F0;
    height: 35px;
    width: 35px;
    top: 1px;
    right: 1px;
    }

    and also for the IE search form issue, try to replace this code:

    Code:
    .mod-search > #searchform {
    position: absolute;
    right: 0;
    top: 40px;
    }

    with this:

    Code:
    .mod-search > #searchform {
    position: absolute;
    left: 718px;
    top: 40px;
    }

    Hope it helps. :)

    Best Regards,

    Ismael

    #70040

    With the revised code, when you start squeezing the site, the search bar stays static and by the time you are at iphone dimensions the search bar is not viewable. I can’t verify the IE9 fix as I’m on a mac. I’ll leave that for Chris to confirm. Maybe I’ve left some old code in place or something…..

    #70041

    Would it be possible to get a definitive solution to this including support for the responsive design? I would like to implement this change in my site and I’m sure others would too. In fact, what would be even better is to add a setting to the theme so people don’t have to add so much code themselves. Just a suggestion. Thank you.

    #70042

    Hi,

    I checked your site using firebug and I’m not seeing the code I have posted above.

    Code:
    .mod-search #searchsubmit {
    background-color: #DFE6F0;
    height: 35px;
    width: 35px;
    top: 1px;
    right: 1px;
    }

    I can’t see any problem on my end except for the overlapped button. Kindly give us some screenshot regarding the problems you have mentioned. Thanks

    Regards,

    Ismael

    #70043

    I’ve been having strange caching issues but when I look in Firebug I do see the code. I’ve taken a screen shot with the screen squeezed. You can see the social buttons overlapping and no sign of the search bar. It looks perfect when the browser is full but stays in place as the browser gets smaller. In the shot you can see the code in Firebug. There has been a lot of code flying around on this request so maybe I misplaced something. If anyone else has actually succeeded in getting this to work properly I’d love to hear it. Hopefully we’ll figure this out.

    http://christiepits.com/wordpress/wp-content/themes/ncreative/images/Screenshotsocial.png

    #70044

    Hi shelteredinsound,

    I apologize I was looking at Chris site(http://dev.hvs.on.ca). Please remove this code:

    Code:
    .mod-search > #searchform {
    position: absolute;
    left: 718px;
    top: 40px;
    }

    And replace it with this:

    Code:
    .mod-search > #searchform {
    position: absolute;
    right: 0;
    top: 40px;
    }

    For the IE issue just add this code:

    Code:
    .mod-search #s {
    width: auto;
    }

    Hope this helps. :)

    Best Regards,

    Ismael

    #70045

    Thanks. We are indeed getting closer as the search bar now reacts nicely to the responsive design but the search and social media buttons are still overlapping with the main logo. Ideas to have them coexist when the site is squeezed? Can’t confirm your IE9 fix as I don’t have access to a PC.

    #70046

    Hi,

    Inside the Propulsion folder, kindly open the css folder and find layout.css. Find this code:

    Code:
    @media only screen and (max-width: 767px)

    Below it you can find this line:

    Code:
    #top .logo{float:none; margin:0 auto; display: block; text-align: center; width:100%;}

    Remove the text-align: center; And add this below:

    Code:
    .mod-search > ul.social_bookmarks {
    top: 10px!important;
    right: 0;
    }

    Just change the top and right value as required. Hope this helps. :)

    Best Regards,

    Ismael

    #70048

    Thanks! I had to make a few extra little tweaks to get what I wanted but your direction really helped.

    #70049

    Hey,

    That’s great! Glad we could help you. :)

    Cheers,

    Ismael

Viewing 21 posts - 1 through 21 (of 21 total)

The topic ‘Add Search and Social to the Header’ is closed to new replies.