I have centered the Superfish Navbar menu on the page but struggling to find a way to center the first level sub menu on the page.
I couldn't post an image here as I do not have 10 reputations.
Here's a good work-around:
Step 1:
Create a Javascript function to displace the sub menu. Something like this:
function DisplaceSubMenu(myDistance){
document.getElementById("mySubMenu").style.margin-left= -myDistance;
}
Remember: you have to give the un-ordered list an id of "mySubMenu".
Step 2:
Call the Javascript function when hovering over "Home" or "Services" since they hold submenus. You make the same call, but pass the "myDistance" attribute as a custom distance (try & error). Here's an example:
Home
Related
I'm trying to make a Wordpress menu that scrolls to a specific place on a page when you click on a menu item. When the viewport is on that element of page there's a dot at the end of the menu item title and moves acordingly which part of the page is visible. E.g. When you click on "photo" on the menu it scrolls to the photo section and a dot slides to the end of the word "photo." Then when you click "contact" the dot slides from the end of the word "photo" to the end of the word "contact" and the page scrolls to the contact section. The dot should also slide when you scroll to a section manually. I've tried to use onScroll but failed. Is there any way to achieve this?
I think your question is related to scrollspy. If i got you correct then, try this link:
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_scrollspy&stacked=h
I'm using meteor + bootstrap.
My nav is at the bottom of the page and the logginButtons are in the navbar.
The dropdown drops down, below the end of the page.
Is there a way to make it drop up, on top of the navbar ?
The pattern is my background, under firefox's window.
The Bootstrap document states it clearly that
Dropdown menus can be changed to expand upwards (instead of downwards) by adding .dropup to the parent.
You will see a working example if you follow the link.
Maybe the question is silly, but I just start to look into Drupal and I cannot find any relatives information on the web.
I have installed a theme (corporate clean) that use a inline main navigation just after the logo and before the gallery.
I would like to change that menu position. Move the main menu on the left side.
But everytime I give to navigation or main menu block the 'navigation' position, I see a new block filled in with the same main menu links.
Instead I want the first link be relocated in the left side.
How could I do that?
(btw the theme has even a navigation block, but it cannot understand how it work exactly..)
thanks
The menu is usualy inserted in the page.tpl.php you can move it around in this file.
Alternatively you can go to admin/appearance/settings/yourTheme and turn off "Main menu" and "Secondary menu" and use the Menu block module to position menus where you want them.
Do you mean you want the main menu (that is initially in the "navigation" area, like horizontally) in a new column on the left side, like vertically?
If yes, just go in administration>structure>blocks and drag your "Main Menu" in "First Lateral Bar" area (under Content, in Coporate Clean theme). Save and check the result.
If not, do you want your Main menu just like it is now but aligned left instead of right? If yes, just play with CSS.
Using a blank Wordpress theme to create a custom site, but it did not have any CSS for a drop down submenu. I have it basically working but when I try to move the cursor to the second drop down item down under the (events tab) the sub menu disappears.
site is here
I thought I have it all set to display block so that the whole menu item is the button, but not the case here.
You need to set the z-index of the drop down menu higher than the image. By default elements have a z-index of 1, so anything greater than 1 will do (unless you've specified otherwise)
I cannot get the main menu to stay highlighted when going to sub menu or when in a sub menu.
Anyone have a css trick to highlight (maintain the highlight)in the main menu when the sub menu is being hovered or clicked.
Thanks...
As we don't have proper sample code of yours.
To achieve this, I suggest you to use JQuery & CSS for better look and feel.
Below is JQuery plugins URL. You can find 7 styles of horizontal menu's.
http://plugins.jquery.com/project/jQuery-Horizontal-Menu