Bootstrap navbar style change on toggle - css

I am using a WP theme(bootstrap). When resize my window to mobile view, i see a button of toggle menu (3 horizontal lines). On clicking it, i see a drop down type list of pages.
I want to change that drop down to open like right to left.
Just like this : Here is the link
How to change the dropping style from [top To Bottom] to [Right To Left]?

I think you might need to look at Bootstrap's 'off-canvas' menu. Unfortunately it's not just a simple change from top to bottom to right and left but it's quite straight forward to achieve using this demo example.
https://getbootstrap.com/examples/offcanvas/

Related

Any idea for making image hotspot (WP)

For Wordpress, how can I make it like https://store.google.com/us/category/connected_home
Hotspot info, Top-tab for changing the spot. Can be made with slide revolution?
Inspect the page. They've positioned the elements with percentage based left and top values.
If I was to build something like this, I'd use javascript to hide and show the various labels when I click the menu tabs. And I'd add CSS animations so they transition in like in your example.

meteor login dropdown drops below end of page

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.

Ionic Platform custom midle tab

So i having problem to customise in bottom tabs the middle, i want to make middle tab height bigger then other tabs, so i cant find the way to customise it. It would be nice if there would be somebody that can help with this.
Link for editing link. And wanted result image.
Tried separately change the hight but, there are a feeling that flex box doesn't allow to tab go out of content.
Inherit the CSS class that holds the icon in the middle and add your custom properties.

Possible to use the same icon to open and close a modal?

I'm wondering whether I can use the "same" icon (or something that looks the same) that triggers a full-screen, semi-transparent Bootstrap modal (that I have customized) to pop up and then close it with an icon that is in the same location.
However, say it is initially a hamburger icon on the normal page, when I click the icon to pop up the modal menu, it is now under the modal. Is there a way to have it stay on top of even a modal? I tried z-index but I couldn't get it to work.
The tricky thing for me is that I wanted to have the icon transition from a hamburger to an X and then vice versa when it closed: http://sarasoueidan.com/blog/navicon-transformicons/
Initially I was hoping I could get the icon to transition and then somehow set the icon to layer on top of everything, including modals.
Any ideas or suggestions would be great, thank you.
It should be possible to do this with z-index. However, z-index only works with elements that have "position" set to something other than "static" (the default). Try adding position: relative to your open / close button and hopefully then you should be able to use z-index to keep the button in front of the overlay.
There's a good reference with more info about z-index on CSS Tricks.

Change position to the default main menu of a theme

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.

Resources