# Add a bar to above header for social icons and contact details

**URL:** <https://colorlibsupport.com/t/add-a-bar-to-above-header-for-social-icons-and-contact-details/6810>\
**Category:** Dazzling\
**Created:** [January 23, 2015, 10:21pm UTC](https://colorlibsupport.com/t/add-a-bar-to-above-header-for-social-icons-and-contact-details/6810 "2015-01-23T22:21:50Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![4alex](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/4/ecccb3/32.png) [@4alex](https://colorlibsupport.com/u/4alex)\
**Post date:** [January 23, 2015, 10:21pm UTC](https://colorlibsupport.com/t/add-a-bar-to-above-header-for-social-icons-and-contact-details/6810/1 "2015-01-23T22:21:50Z")

</div>

Hi Aigars,

Again, great theme you have in Dazzling!

I am working through customising my Dazzling site (still under construction), and need some assistance in creating a bar ([vpthemes.com/preview/Terrifico/](http://vpthemes.com/preview/Terrifico/))to go above the header. I would like the extra bar to enable me to place:

1. a quote/tagline
2. contact details
3. some of social media icons (i.e. twitter and facebook).

Any assistance will be greatly appreciated.

Thanks in advance,  
Alex

---

<div class="post-metadata">

**Author:** ![aigars-silkalns](https://colorlibsupport.com/user_avatar/colorlibsupport.com/aigars-silkalns/32/13469_2.png) [@aigars-silkalns](https://colorlibsupport.com/u/aigars-silkalns)\
**Post date:** [January 24, 2015, 10:54am UTC](https://colorlibsupport.com/t/add-a-bar-to-above-header-for-social-icons-and-contact-details/6810/2 "2015-01-24T10:54:40Z")

</div>

Add this code to right after `<div id="page" class="hfeed site">`inside `header.php`

```auto
<div class="top-bar">
	<div class="container">
		<div class="row">
			<div class="col-md-6">
				<ul id="top-header-menu" class="top-nav clearfix">
				<li><a href="#">Home</a></li>
				<li><a href="#">About</a></li>
				<li><a href="#">Fashion</a></li>
				<li><a href="#">Style</a></li>
				<li><a href="#">Beauty</a></li>
				</ul>
			</div>

			<div class="col-md-6 header-social">
				<div id="social" class="social"><ul>
					<li><a class="social-profile" href="#" title="Follow us on facebook"><i class="social_icon fa fa-facebook"></i></a></li>
					<li><a class="social-profile" href="#" title="Follow us on twitter"><i class="social_icon fa fa-twitter"></i></a></li>
					<li><a class="social-profile" href="#" title="Follow us on googleplus"><i class="social_icon fa fa-googleplus"></i></a></li>
					<li><a class="social-profile" href="#" title="Follow us on youtube"><i class="social_icon fa fa-youtube"></i></a></li>
					<li><a class="social-profile" href="#" title="Follow us on linkedin"><i class="social_icon fa fa-linkedin"></i></a></li>
					<li><a class="social-profile" href="#" title="Follow us on pinterest"><i class="social_icon fa fa-pinterest"></i></a></li>
					<li><a class="social-profile" href="#" title="Follow us on rss"><i class="social_icon fa fa-rss"></i></a></li>
					<li><a class="social-profile" href="#" title="Follow us on tumblr"><i class="social_icon fa fa-tumblr"></i></a></li>
					<li><a class="social-profile" href="#" title="Follow us on flickr"><i class="social_icon fa fa-flickr"></i></a></li>
					<li><a class="social-profile" href="#" title="Follow us on instagram"><i class="social_icon fa fa-instagram"></i></a></li>
					<li><a class="social-profile" href="#" title="Follow us on dribbble"><i class="social_icon fa fa-dribbble"></i></a></li></ul>
				</div>
			</div>
		</div>
	</div>
</div>

```

Now add this to Theme Options - Other - Custom CSS:

```auto
.top-bar ul {
    list-style: none;
    margin: 0 10px;
    padding: 0;
}
#top-header-menu li {
    display: inline;
    padding: 10px;
}

.top-bar {
    background: #1FA67A;
    line-height: 40px;
    height: 40px;
}
.top-bar a {
  color: #fff;
}

.top-bar #social {
	text-align: right;
}

```

Now you will get a top bar on top of current navigation with menu item style items on the left and social icons on the right. Other tweaks are entirely up to you but this should get you started.

---

<div class="post-metadata">

**Author:** ![4alex](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/4/ecccb3/32.png) [@4alex](https://colorlibsupport.com/u/4alex)\
**Post date:** [January 24, 2015, 9:25pm UTC](https://colorlibsupport.com/t/add-a-bar-to-above-header-for-social-icons-and-contact-details/6810/3 "2015-01-24T21:25:25Z")

</div>

Hello Aigars!

Thank you so much for the above; my site is coming along - slowly but surely.

One thing - I tried to customise the social media icons (for me I just need twitter, facebook and instagram), but changes did not keep. If I remove the excess icons (just keeping the three), how will this effect the overall code, i.e. div’s at end?

Thanks again,  
Alex

---

<div class="post-metadata">

**Author:** ![aigars-silkalns](https://colorlibsupport.com/user_avatar/colorlibsupport.com/aigars-silkalns/32/13469_2.png) [@aigars-silkalns](https://colorlibsupport.com/u/aigars-silkalns)\
**Post date:** [January 26, 2015, 7:46am UTC](https://colorlibsupport.com/t/add-a-bar-to-above-header-for-social-icons-and-contact-details/6810/4 "2015-01-26T07:46:39Z")

</div>

To add only 3 icons use code like this:

```auto
<div class="top-bar">
	<div class="container">
		<div class="row">
			<div class="col-md-6">
				<ul id="top-header-menu" class="top-nav clearfix">
				<li><a href="#">Home</a></li>
				<li><a href="#">About</a></li>
				<li><a href="#">Fashion</a></li>
				<li><a href="#">Style</a></li>
				<li><a href="#">Beauty</a></li>
				</ul>
			</div>

			<div class="col-md-6 header-social">
				<div id="social" class="social"><ul>
					<li><a class="social-profile" href="#" title="Follow us on facebook"><i class="social_icon fa fa-facebook"></i></a></li>
					<li><a class="social-profile" href="#" title="Follow us on twitter"><i class="social_icon fa fa-twitter"></i></a></li>
					<li><a class="social-profile" href="#" title="Follow us on instagram"><i class="social_icon fa fa-instagram"></i></a></li>
				</div>
			</div>
		</div>
	</div>
</div>

```

---

<div class="post-metadata">

**Author:** ![4alex](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/4/ecccb3/32.png) [@4alex](https://colorlibsupport.com/u/4alex)\
**Post date:** [January 26, 2015, 2:57pm UTC](https://colorlibsupport.com/t/add-a-bar-to-above-header-for-social-icons-and-contact-details/6810/5 "2015-01-26T14:57:47Z")

</div>

Thank you so much Aigars!

The above worked perfectly! One more thing, if I choose to keep 3 menu items in top bar (instead of 5), can I keep the above format (deleting the last menu item names, but keep other structure of code) or must I completely remove the remaining 2? If I have to remove the 2, how will it effect the code?

Thanks in advance,  
Alex

---

<div class="post-metadata">

**Author:** ![aigars-silkalns](https://colorlibsupport.com/user_avatar/colorlibsupport.com/aigars-silkalns/32/13469_2.png) [@aigars-silkalns](https://colorlibsupport.com/u/aigars-silkalns)\
**Post date:** [January 26, 2015, 7:10pm UTC](https://colorlibsupport.com/t/add-a-bar-to-above-header-for-social-icons-and-contact-details/6810/6 "2015-01-26T19:10:45Z")

</div>

It won’t affect the code if you will remove the entire line. Here is an example of a single menu item that can be removed:

`<li><a href="#">Style</a></li>`

If you will leave some parts of this code then you might experience some glitches but removing the entire line is fine.

---

<div class="post-metadata">

**Author:** ![4alex](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/4/ecccb3/32.png) [@4alex](https://colorlibsupport.com/u/4alex)\
**Post date:** [January 28, 2015, 2:52pm UTC](https://colorlibsupport.com/t/add-a-bar-to-above-header-for-social-icons-and-contact-details/6810/7 "2015-01-28T14:52:01Z")

</div>

Thank you Aigars,

Much appreciated as always.

---

<div class="post-metadata">

**Author:** ![ajay09](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/a/49beb7/32.png) [@ajay09](https://colorlibsupport.com/u/ajay09)\
**Post date:** [March 15, 2015, 10:24pm UTC](https://colorlibsupport.com/t/add-a-bar-to-above-header-for-social-icons-and-contact-details/6810/8 "2015-03-15T22:24:49Z")

</div>

Hello Sir,

I want to know how to fix the top bar, that is when we scroll down, the navigation menu and top bar remains fixed.

---

<div class="post-metadata">

**Author:** ![aigars-silkalns](https://colorlibsupport.com/user_avatar/colorlibsupport.com/aigars-silkalns/32/13469_2.png) [@aigars-silkalns](https://colorlibsupport.com/u/aigars-silkalns)\
**Post date:** [March 16, 2015, 9:22am UTC](https://colorlibsupport.com/t/add-a-bar-to-above-header-for-social-icons-and-contact-details/6810/9 "2015-03-16T09:22:45Z")

</div>

@ajay09

You want to fix this bar mentioned above or you want to fix navigation menu just like it is [described here](https://colorlibsupport.com/t/sticky-navigation/#post-9291 "Fixed navigation").

---

<div class="post-metadata">

**Author:** ![janezoe19](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/j/b3f665/32.png) [@janezoe19](https://colorlibsupport.com/u/janezoe19)\
**Post date:** [March 1, 2018, 1:22am UTC](https://colorlibsupport.com/t/add-a-bar-to-above-header-for-social-icons-and-contact-details/6810/10 "2018-03-01T01:22:40Z")

</div>

Hi… how can i make the top bar tranparent?

---

<div class="post-metadata">

**Author:** ![colorlibsupport](https://colorlibsupport.com/user_avatar/colorlibsupport.com/colorlibsupport/32/1494_2.png) [@colorlibsupport](https://colorlibsupport.com/u/colorlibsupport)\
**Post date:** [March 1, 2018, 6:18am UTC](https://colorlibsupport.com/t/add-a-bar-to-above-header-for-social-icons-and-contact-details/6810/11 "2018-03-01T06:18:50Z")

</div>

Hi @janezoe19

let me see it, please provide url