Social Icons and Spacing

[erinmae108]

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!

[Veena]

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

article.post-12226.page .vc_row {
padding: 30px 0px;
}

[Veena]

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

          ?>
       

           

               

                   

                       

                           
                               
                           
                       
                       

                           
                            
                           
                       
                       

                           
                               
                           
                       
                       

                               
                           
                       
                       

                           
                               
                           
                       
                   
               
           
       
                   
                    

		
	

[Veena]

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.

[erinmae108]

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/

[Veena]

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

[Veena]

You can give padding like below custom CSS

#site-logo {
padding-bottom: 0px;
}

article.post-12226.page .vc_row {
padding: 30px 0px 0px 0px;
}

[erinmae108]

Thank you so much- super helpful!!

[erinmae108]

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.

[erinmae108]

something like this

[Veena]

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;
}}

[Author]

Posts