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].
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?
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.
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.
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.
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;
}
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.
Thanks a lot Andrew for your help. It worked.
Awesome :) Glad to hear that did the trick. All the best.