Page Builder 
Widgets Bundle 
SiteOrigin CSS 
Installer Custom Menu: Horizontally Aligned instead of Vertical
www.tsktech.in in the footer i have added Custome Menu Widget. how do i list the menu horizontally ?
ie at present
menu1
menu2
menu3
what it want is
menu1 menu2 menu3
URL: http://tsktech.in
This is our free support forum. Replies can take several days.
Need fast email support? Get SiteOrigin Premium
Replies
8Hi Srikanth
Please navigate to Appearance->Custom CSS and add the following in the custom CSS Editor
#menu-footermenu .menu-item, #menu-secondmenu .menu-item { display: inline-block; padding: 0 5px; }Let us know how you get on
Magus
Dear Magnus,
no luck, my footer is as follows
<footer id="colophon" class="site-footer" role="contentinfo">
<div id="footer-widgets" class="full-container">
<aside id="nav_menu-2" class="widget widget_nav_menu”>
<h3 class="widget-title">Navigation Menu</h3>
<div class="menu-footermenu-container”>
<ul id="menu-footermenu" class="menu”>
<li id="menu-item-49" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-49"><a href="http://www.tsktech.in/about/">About</a></li>
<li id="menu-item-47" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-47"><a href="http://www.tsktech.in/privacy-policy/">Privacy Policy</a></li>
<li id="menu-item-50" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-50"><a href="http://www.tsktech.in/contact-us/">Contact Us</a></li>
<li id="menu-item-45" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-45"><a href="http://www.tsktech.in/site-map/">Site Map</a></li>
</ul>
</div>
</aside>
<aside id="nav_menu-3" class="widget widget_nav_menu”>
<h3 class="widget-title">Meet Us</h3>
<div class="menu-secondmenu-container”>
<ul id="menu-secondmenu" class="menu”>
<li id="menu-item-51" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-51"><a href="http://www.tsktech.in/events/">Events</a></li>
<li id="menu-item-56" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-56"><a href="http://www.tsktech.in/careers/">Careers</a></li>
<li id="menu-item-57" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-57"><a href="http://www.tsktech.in/subscribe-to-newsletter/">Subscribe to Newsletter</a></li>
</ul>
</div>
</aside>
<aside id="vantage-social-media-2" class="widget widget_vantage-social-media”>
<h3 class="widget-title">Connect with Us</h3>
<a class="social-media-icon social-media-icon-facebook social-media-icon-medium" href="http://www.facebook.com/tsktechnologies" title="TSKAMATH TECHNOLOGIES PVT LTD Facebook" target="_blank"><span class="fa fa-facebook"></span></a>
<a class="social-media-icon social-media-icon-twitter social-media-icon-medium" href="https://twitter.com/tsktech" title="TSKAMATH TECHNOLOGIES PVT LTD Twitter" target="_blank"><span class="fa fa-twitter"></span></a>
</aside>
</div>
<!– #footer-widgets –>
<div id="site-info">
2015 Copyright © TSKAMATH TECHNOLOGIES PVT LTD., All rights reserved
</div><!– #site-info –>
</footer>
Hi Srikanth
Could you please confirm that you have added the above into Appearance->Custom CSS and then clicked Save CSS at the bottom as I cannot see the relevant entries in your page source.
Thanks
Magus
Dear Magus,
I removed it.. Ok Let me put it back, I have a Child Theme and the style.css is as follows
/*
Theme Name: Vantage Child
Author: SiteOrgin
Template: vantage
Version: 1.0
*/
@import url("../vantage/style.css");
/* Site Title Font */
header#masthead h1 {
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
/* color:#0000ff !important; */
/*font-size:13px;*/
}
/*
#masthead .hgroup h1 {
/*color: #666666;*/
/* color: #0000FF; */
font-weight: 100;
font-size: 36px;
line-height: 1em;
} */
#menu-footermenu .menu-item, #menu-secondmenu .menu-item {
display: inline-block;
padding: 0 5px;
}
Hi Srikanth
I have just had a look and the child theme custom css currently reads
/* Theme Name: Vantage Child Author: SiteOrgin Template: vantage Version: 1.0 */ @import url("../vantage/style.css"); /* Site Title Font */ header#masthead h1 { font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important; color:#0000ff; font-size:13px; }For some reason it looks like your style.css is not being saved when you click on Update file after editing. Please try the posted code in Appearance->Custom CSS.
Let us know how it goes
Magus
Hi Srikanth
We recently added a snippet library to Appearance > Custom CSS. The library needs work but I have a few snippets in there at the moment. One of the snippets I have in there is for a horizontal footer menu.
1. Appearance > Custom CSS.
2. Click Snippets top left.
3. Search for Horizontal Footer Menu. Insert and save.
4. Make sure your Custom Menu Widget is the first widget inserted into the footer widget area.
Hope that helps.
(This is separate to the feedback from Magus regarding your child theme)
Dear Andrew,
thanks buddy.. this awesome ..
pls note the type error :
#footer-widgets .widget.widget_nav_menu li:before {
content: '07C’; \* this in the snippet is content: '007C’; —> display “0007C” instead of “|"
font-family: FontAwesome;
margin-right: 16px;
}
Glad that helped. Thanks for reporting my error. That rule should read:
#footer-widgets .widget.widget_nav_menu li:before { content: "\007C\00a0\00a0"; margin-right: 16px; }Seems to do the trick on my side.
Replies on this thread are closed.
Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.