Hi,
I want to include social icons in a row at the bottom of the left hand nav bar on my site (Icon stack, based on demo 9). Currently, I have the icons as custom menu items, but this isn’t ideal.
I also want to include copyright info in the same location (ideally aligned towards the bottom of the page). Can you help? I’ve tried adding an additional side bar to contain the info, but I can’t get it to display…!
My site is in development so I’ll send login details as a secure note.
Thanks!
Hi there,
Thanks for the details!
Please add this css to your theme option-> Global css this will fix your icon issue.
#menu-main-menu {
text-align: center;
}
#menu-item-177, #menu-item-181, #menu-item-183 {
display: inline-block !important;
}
#menu-item-177 a, #menu-item-181 a, #menu-item-183 a {
padding: 0px !important;
font-size: 20px;
}
.x-navbar-wrap p {
padding: 20px;
text-align: center;
font-size: 12px;
}
For copyright text, please badd this JS code to your custom JS
jQuery(document).ready(function(){
jQuery("<p>Hello world!</p>").insertAfter("nav.x-nav-wrap");
});
Please replace the hello world text with your text.
Hope this helps!
Hi @basanta,
Thanks - both of those work great, but is there a way I can align the copyright text to the bottom of the page & include links (or even a second menu if possible) underneath…
I tried to add a link eg. <a href="/sitemap/">Sitemap</a> but it breaks the code & everything disappears. How can I include this?
Thanks 
Hi again,
Please use full URL in the href attribute, for example:
<a href="https://dexhannon.co.uk/sitemap">Sitemap</a>
Replace the link with actual URL. For your initial query, I tried to check your site the given credentials are no longer working on my end. Please double check the credentials.
Thanks!
Hi @Nabeel,
That still doesn’t seem to work? All the text disappears…
I’m about to update the site login details, so you should be able to login shortly.
Thanks,
Vicky
Hello there,
The copyright text was just on the very bottom part of the sidebar. It was hidden since its color was white.
Please add this CSS code:
.copyright.top {
margin-top: 60px !important;
}
.copyright.bottom {
margin-bottom: 20px !important;
}
.copyright {
padding-top: 0 !important;
padding-bottom: 0 !important;
padding-left: 40px !important;
padding-right: 40px !important;
}
.copryright p {
font-family: "PT Sans",sans-serif;
font-style: normal;
font-weight: 400;
font-size: 7px;
letter-spacing: 0.083em;
}
.x-navbar-wrap p,
.copryright p,
.copyright.bottom a {
color: #999999 !important;
}
.copyright.bottom a:hover {
color: rgb(43,49,55) !important;
}
Then for the copyright text, kindly check this Javascript code in X > Theme Options > JS:
// Copyright Text
$('<div class="copyright top"><p>© Dex Hannon 2018: All rights reserved.</p></div><div class="copyright bottom"><p><a href="http://link-here/">Privacy & Cookies</a> | <a href="http://link-here/">Ts&Cs</a> | <a href="http://link-here/">Sitemap</a></p></div>').insertAfter("#x-nav-wrap-mobile");
Then change http://link-here/ to the url of each of your copyright menu item.
I’ve formatted your CSS code as you were having duplicating CSS declaration. Also, I’ve cleaned your Javascript code as you were having duplicate calls for document ready.
Hope this helps.
That’s great! 
I have a couple of other styling questions though…
How can I decrease the space between the copyright.top & copyright.bottom div classes?
Also, I actually wanted the full copyright text to sit at the bottom of the menu bar - how can I achieve this?
Thanks in advance!
Hey There,
To decrease the space between the copyright.top & copyright.bottom div classes, you can make use of this code:
.copyright p {
padding-top: 0;
padding-bottom: 0;
}
And to make sure that it sits at the bottom of the menu bar, you can make use of this code:
@media(min-width:980px){
.x-navbar-fixed-left .x-navbar-inner>.x-container.width {
position: relative;
height: 100%;
}
.copyright.top {
margin-top: 0 !important;
position: absolute;
bottom: 20px;
}
.copyright.bottom {
position: absolute;
bottom: 0;
}
}
Hope this helps.
That works perfectly - thanks for your help 
Just 1 more thing…
How can I align the text centrally, to match the rest of the nav bar? Also, it’s behaving oddly in mobile view - is there a way to keep the text within the mobile nav dropdown?
Thanks!!
Hi there,
Please add this code as well:
@media (max-width: 480px) {
.x-navbar-inner .copyright {
clear: both;
}
}
Hi there,
That doesn’t seem to work & doesn’t centre the text at the bottom of the nav bar either?
Hi There,
Can you please try this CSS and let us know how this goes.
@media (max-width: 767px) {
.x-navbar-inner .copyright {
width: 100%;
text-align: center;
}
.x-navbar-inner .copyright.top {
bottom: 25px !important;
}
.x-navbar-inner .copyright.bottom {
bottom: 5px !important;
}
.x-nav-wrap.mobile {
padding-bottom: 50px !important;
}
.masthead-inline .x-btn-navbar {
position: relative;
z-index: 99999;
}
}
Hope this helps!
Thanks
OK - that’s getting there, thanks. It looks fine in desktop view, but in mobile view, it needs to display only in the mobile menu/nav bar when it’s expanded, not at the top of the page as it looks really odd.
Is there any way to achieve this? See screen shot for the weird positioning in mobile view:
Hi There,
The mobile nav and the text are in. different section. I had managed to get it in the bottom of the nav when the menu is opened.
The thing now you have requested for need. some coding customization and which is out of our theme support scope.
I would suggest you please hide it in mobile view.
To hide it, please update the above CSS with this.
@media (max-width: 767px) {
.x-navbar-inner .copyright {
display: none;
}
}
Thanks for understanding!
you are most welcome!
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.
