Social Icons and Spacing

This topic is: not resolved

This topic contains 10 replies, has 2 voices, and was last updated by Veena Veena 4 years, 11 months ago.

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #9312
    Erinmae108
    erinmae108
    Member
    Post count: 5

    Hi. How can I add social icons to my header? Also, I would like to reduce the white spacing above and below the slider.

    http://69.89.31.111/~awakene5/

    Thanks!

    #9324
    Veena
    Veena
    Moderator
    Post count: 8159

    For reducing white space pls add the below custom CSS in themeoptions –

    article.post-12226.page .vc_row {
    padding: 30px 0px;
    }
    
    #9325
    Veena
    Veena
    Moderator
    Post count: 8159

    Pls add the following codes in header.php immediately after – get_template_part(‘menu’, ‘primary’); // Loads the menu-primary.php template.

              ?>
           
                       
                        < ?php 
    
    #9326
    Veena
    Veena
    Moderator
    Post count: 8159

    Also add the following custom css in themeoptions.

    .social-wrap{
    clear:both;
    display:inline-block;
    }
    

    There may come a little difference in alignment.It can be resolved using custom CSS.
    If you experience any problem pls let us know.

    #9428
    Erinmae108
    erinmae108
    Member
    Post count: 5

    Thank you- it seems there is something extra showing up- also how can i padding between the logo and nav bar and also below the slider?

    Thanks!

    http://69.89.31.111/~awakene5/

    #9433
    Veena
    Veena
    Moderator
    Post count: 8159

    In header.php you can see the same code that appeared on your page.Pls go to that code line in header.php and you can see space in between the angle bracket and the question mark,pls remove the same.
    The sceenshot given by me is self explanatory.

    Thanks

    #9435
    Veena
    Veena
    Moderator
    Post count: 8159

    You can give padding like below custom CSS

    #site-logo {
    padding-bottom: 0px;
    }
    
    article.post-12226.page .vc_row {
    padding: 30px 0px 0px 0px;
    }
    
    #9449
    Erinmae108
    erinmae108
    Member
    Post count: 5

    Thank you so much- super helpful!!

    #9451
    Erinmae108
    erinmae108
    Member
    Post count: 5

    Okay last question for logo and nav bar- how can I bring up the nav bar to be inline with the logo? And thus bring up the social icons as well. Thanks.

    #9452
    Erinmae108
    erinmae108
    Member
    Post count: 5

    something like this

    #9489
    Veena
    Veena
    Moderator
    Post count: 8159

    Since your primary menu list is lengthy unless you reduce the list,it will be difficult to allign the menus’s as per the screenshot and also it will affect site’s responsive feature.
    Pls try to use dropdown menus So that you can use the following custom CSS.
    Also pls remove the primary menu custom CSS that you have applied before

    .woocommerce-site #primary-menu {
     margin-right: 0px;
     }
    .#primary-menu {
    top: 35px;
    }
    .social-wrap ul.social-list {
    position: absolute;
    top: 0px;
    right: 0px;
    }
    @media only screen and (max-width: 487px)
    {
    #site-logo {
    padding-top: 40px;
    }}
    
Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.