Before you ask please READ THIS

Social icon to appear in Header Variant 4 layout

edited October 2014 in Blame Posts: 47
Hi there! Thank you for making the Blame theme. We are enjoying to process of programming it for our customer.
We do have a question about the social icon in the main-header menu. We have currently selected Blame theme --> Layout --> Header - Main settings --> Header variant --> Variant 4 (one line, no socials).
We do however would like to have this one-line menu layout but WITH the socials icons positioned on it's right side. (variant 5? ;-)
Can you provide us with a way to obtain that?
Thanks in advance and keep on your good work!

Comments

  • AirAir
    Posts: 10,970
    Hello there:-)

    One line variant has very limited space, and that is why we don't put there socials. However you can enable social icons in top bar instead, so there wont be too much "things" in one line.

    Another case is that, there is no mobile optimization for such case, so you would have to do much of testing and probably write some custom CSS for responsive layout.

    What do you think?

    PS. If you are happy with this theme please don't forget to rate us on ThemeForest - it helps us a lot! Thanks! How to rate?

    With regards.
  • Posts: 47
    Hi there! Thanks for your answer.
    I have considered using the top bar, but we have no further use for it besides for the social icon. Since we will be using only one social icon, using the top bar seems a bit overdoing it.
    I'm understanding basic CSS but writing my own CSS for responsiveness is unfortunately out of my league :-)
    I'll give it some more thought.
    Thanks
  • AirAir
    Posts: 10,970
    One social icon you say. OK I will take a look at it tomorrow. Check in again in around 12-14 hours ;-)

    With regards.
  • Posts: 47
    That would be very helpfull! Thanks a million in advance!
  • AirAir
    edited October 2014 Posts: 10,970
    I need to know do you use "Search" in header, cause it will be positioned absolute?
    Post edited by Air on
  • AirAir
    edited October 2014 Posts: 10,970
    Anyway here is changes for it when search is active in header:
    Go to blame\advance\utilities\header.php line ~273 and change:
    
                <?php if( $header_search ){ a13_header_search(); } ?>
    
                <?php else: ?>
    
    to
    
                <?php if( $header_search ){ a13_header_search(); } ?>
    	        <?php if ($socials) { echo a13_social_icons($a13_apollo13->get_option( 'appearance', 'header_socials_color' )); } ?>
                <?php else: ?>
    Next use such custom CSS:

    .header-one-line .socials{
    margin-top: -15px;
    position: absolute;
    right: 50px;
    top: 50%;
    z-index: 301;
    }
    .header-one-line.with-search .navigation-bar {
    padding-right: 90px;
    }

    @media only screen and (max-width: 1120px) {
    .header-one-line .socials{
    right: 70px;
    }
    .header-one-line.with-search .navigation-bar {
    padding-right: 110px;
    }
    }

    @media only screen and (max-width: 680px) {
    .header-one-line .socials{
    right: 110px;
    }
    }
    Should do it:-)

    Btw. That was you who rated our theme yesterday? :-)

    With regards.
    Post edited by Air on
  • edited October 2014 Posts: 47
    Sorry for not replying sooner to your question regarding the search in header. Let me start by saying I really appreciate your effort in this!! Unfortunately we will not use the search box. On top of that we are also using the WMPL plugin for translation purposes (should have mentioned that in the firts place) and we chose to make the site translatable by two clickable flags which are positioned, you guessed it right, on the right of the header-menu. So with your code the social icon was placed right on top of the first flag :-)
    But I played around a bit with your code and found that when I changed the "right" value in the first snippet to -35px it did the job.
    .header-one-line .socials{
    margin-top: -15px;
    position: absolute;
    right: -35px;
    top: 50%;
    z-index: 301;
    }
    It's probably not "clean code" now because if we switch on the search option the magnifying glasses and the social icon appear far right of the header menu. So should we ever want to switch the search on I'll change back to your "right" value of 50px. Anyway, the icon is now exactly where we want it!! Thank you!!!

    Yes, that was me rating the Blame theme yesterday. Was using my clients account so you might see a different name there. We let him buy the theme and now we program it for him. Not so handy in hindsight because I have to use his account details now to log into Theme forest. Fortunately was able to create account in my own name on Apollo13.
    Thanks again!
    Best regards from the Netherlands
    Post edited by Air on
  • AirAir
    Posts: 10,970
    That is great, and big thanks for rating:-)

    If you want I can look into this site and check is responsive layout works good with this change that you made.

    With regards.
  • Posts: 47
    Sure, that would be great. I'll send you a link via PM.
  • AirAir
    edited October 2014 Posts: 10,970
    Not everything looks good, so here is CSS that will work on your site.

    .header-one-line .socials{
    margin-top: -15px;
    position: absolute;
    right: 0;
    top: 50%;
    z-index: 301;
    }
    .header-one-line .navigation-bar {
    padding-right: 40px;
    }

    @media only screen and (max-width: 1120px) {
    .header-one-line .socials{
    right: 10px;
    }
    .header-one-line .navigation-bar {
    padding-right: 50px;
    }
    }

    @media only screen and (max-width: 680px) {
    .header-one-line .socials{
    right: 70px;
    }
    }
    When you will add it, reply to me then I will verify it once again :-)

    With regards.
    Post edited by Air on
  • edited October 2014 Posts: 47
    Morning Air,
    Entered your CSS but the icon now (partly) overlaps the right flag.
    I tried to play around with the "right" values for the different screen settings again and a setting of it seems to work for the large screen resolution (> 1120px). With the max-width: 1120px an adjustment of the right value to -20px will place the icon in the correct distance from the right flag but pushes it partly off-screen, because on those resolutions the menu is positioned on the far right of the screen already. So then I was starting to think that it might be necessary to reduce the dimension of the menu-container in max-width: 1120 so I made:

    .header-one-line .socials{
    margin-top: -15px;
    position: absolute;
    right: -30px;
    top: 50%;
    z-index: 301;
    }
    .header-one-line.with-search .navigation-bar {
    padding-right: 40px;
    }

    @media only screen and (max-width: 1120px) {
    .header-one-line .socials{
    right: 10px;
    }
    .header-one-line .menu-container{
    display: block;
    width: 700px;
    /*Added this to fix width of menu-container for max 1120 screens */
    /* Changes width from default option "auto" to "700px"
    }

    .header-one-line.with-search .navigation-bar {
    padding-right: 50px;
    }

    }

    @media only screen and (max-width: 680px) {
    .header-one-line .socials{
    right: 70px;
    }

    }
    This works for iPad in landscape mode, but............ not in portrait because then the fixed width of 700px prevents the menu to split into two lines which it would in "auto"mode when the screen becomes to small. Makes sense.

    Kind of lost now. Feel like I'm almost there but not sure how to continue for the iPad portrait mode.

    Anyway, added the custom CSS you sent in your last message now so you can have a look.
    I really appreciate your help. I think it's great you guys are willing to listen and respond to the questions/wishes of individual customers. More companies should do that :-)
    Cheers!
    P.S. Not sure how to add the markup for the CSS code in this post (yellow background, Courier font). Can I do that myself?
    Post edited by Air on
  • AirAir
    Posts: 10,970
    Sorry there was error in my code, as I was making code for header with serach ... you can see it cause there are .with-search in my code. I have now updated my code from previous post so please try again using my original version.

    To add code just write it in <pre> tags. :-)

    With regards.
  • Posts: 47
    That's it! Thanks very much Air, the icon is now exactly where we want it!
    I want to thank you for your excellent support with this issue :-)
  • AirAir
    edited October 2014 Posts: 10,970
    That is great, and thanks for coffee ;-)

    Have a good day Sir!
    Post edited by Air on
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!