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/)to go above the header. I would like the extra bar to enable me to place:
Any assistance will be greatly appreciated.
Thanks in advance,
Alex
Add this code to right after <div id="page" class="hfeed site">inside header.php
<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:
.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.
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
To add only 3 icons use code like this:
<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>
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
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.
Thank you Aigars,
Much appreciated as always.
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.
You want to fix this bar mentioned above or you want to fix navigation menu just like it is described here.
Hi… how can i make the top bar tranparent?