This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Customizing Vantage Menu Items Layout

Resolved 7 replies premiumthemetheme-vantage
okeyossai
10 years ago · Last reply by Andrew Misplon 10 years ago

Hi I have a main menu Item called ‘About PetroSai’ with some drop-down sub-items. However, I want the drop-down menu items to appear to the leftmost corner of the website below the menu bar as a separate list when I click on ‘About PetroSai’.

Please how do I do this?

URL: http://petrosaiservices.com

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

7
  1. Andrew Misplon Staff 10 years, 8 months ago

    Hi Okeyossai

    * Edit this page: http://petrosaiservices.com/about/ and set the page template drop down menu in the right column to “Default”.
    * Go to Appearance > Customize > Theme Design > Sidebar and set the sidebar position to left.
    * Go to Plugins > Add New: Install Jetpack. Once activated go to Jetpack > Settings. Select all checkboxes and bulk de-activate everything. Then activate only the module Widget Visibility.
    * Go to Appearance > Menus. Create a new menu with your pages for this task. Don’t assign the menu to any specific location.
    * Go to Appearance > Widgets > Sidebar. Delete the widgets you don’t need. Insert a Custom Menu Widget.
    * Edit your Custom Menu Widget, click Visibility next to the Save button. Set it to only show on the page we want.

    If you want to style your sidebar menu in the same style as your main menu then go to Appearance > Custom CSS and insert:

    /* Sidebar Custom Menu Widget */
#secondary .widget_nav_menu ul li {
background: #343538;
}
#secondary .widget_nav_menu ul li a {
  color: #e2e2e2;
  padding: 10px 20px 10px;
  display: block;
}
#secondary .widget_nav_menu ul li:hover > a {
background: #00bcff;
color: #fff;
}

    Change the color values to suit your menu.

    Hope that helps.

  2. okeyossai 10 years, 8 months ago

    Thanks Andrew.

    Please which of the Jetpacks should I install. There are so many of them. I saw Jetpack by WordPress.com. I tried installing that but it work work until I allow it access to my WordPress.com account. I agreed but it still won’t work. Now I understand I may have a WordPress.org account. I don’t know what the difference is.

    Should I open another WordPress.com account to make the Jetpack plugin to work? If yes, how will it affect my website buliding using both .org and .com accounts.

  3. Andrew Misplon Staff 10 years, 8 months ago

    That is the one tiresome aspect of Jetpack, you do need a WordPress.com account: https://signup.wordpress.com/signup/

    Jetpack activates some modules by default so select them all and bulk de-activate so none are left on. Then activate Widget Visibility.

  4. okeyossai 10 years, 8 months ago

    Thanks Andrew.

    I have installed it and followed your suggestions. I also added the custom CSS below.

    You can take a look at how the website looks. One more thing is that I want to format the display. Currently it is in block format, which is okay but I will like to show the horizontal gridlines (like an excel spreadsheet table) and maybe the column lines as well. All lines to be in black color. How do I do this please?

    #secondary .widget_nav_menu ul li.current_page_parent > a, .widget_nav_menu ul li.current_page_item > a {
    color: #f24202 !important;
    }
    .widget_nav_menu ul li.current_page_parent > a, .widget_nav_menu ul li.current_menu_item > a [class^=”icon-“],
    .widget_nav_menu ul li.current_page_parent > a, .widget_nav_menu ul li.current_page_item > a [class^=”icon-“] { color: #ffffff }

    #secondary .widget_nav_menu ul li a {
    color: #343538;
    padding: 10px 5px 15px;
    display: block;
    }

    #secondary .widget_nav_menu ul li:hover > a {
    color: #0271ef;
    }

  5. Andrew Misplon Staff 10 years, 8 months ago

    Try removing the CSS we just added and try this instead:

    /* Sidebar Custom Menu Widget */
#secondary .widget_nav_menu ul li {
	border-top: 1px solid #000;
}
#secondary . widget_nav_menu ul li:last-of-type {
	border-bottom: 1px solid #000;
}
#secondary .widget_nav_menu ul li a {
	color: #e2e2e2;
	padding: 10px 20px 10px;
	display: block;
}
#secondary .widget_nav_menu ul li:hover > a {
	color: #ccc;
}

    Edit the color values as required.

  6. okeyossai 10 years, 8 months ago

    Thanks a lot Andrew for your help. It worked.

  7. Andrew Misplon Staff 10 years, 8 months ago

    Awesome :) Glad to hear that did the trick. All the best.

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.

Have a different question or issue?

Start New Thread