Home>Support>Custom Menu: Horizontally Aligned instead of Vertical

Custom Menu: Horizontally Aligned instead of Vertical

Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].

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. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 10 years, 2 months ago Magus
    Hi, I Work Here

    Hi 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

  2. 10 years, 2 months ago Srikanth Kamath

    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&gt;
    <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&gt;
    <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&gt;
    <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&quot; 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&quot; 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>

  3. 10 years, 2 months ago Magus
    Hi, I Work Here

    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

  4. 10 years, 2 months ago Srikanth Kamath

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

  5. 10 years, 2 months ago Magus
    Hi, I Work Here

    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

  6. 10 years, 2 months ago Andrew Misplon
    Hi, I Work Here

    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)

  7. 10 years, 2 months ago Srikanth Kamath

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

  8. 10 years, 2 months ago Andrew Misplon
    Hi, I Work Here

    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.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More