I use navigation layout.
https://getmdl.io/components/index.html#layout-section/layout
In 3 example we see that:
< ! -- Navigation. We hide it in small screens. -->
Question: How make that navigation will NOT hide in small screens????
(Sorry for my bad English)
< nav class="mdl-navigation mdl-layout--large-screen-only"> => < nav class="mdl-navigation">
Delete mdl-layout--large-screen-only.
Related
I'm trying to make mobile menu with full width
I tried but it looks like I miss understand something my css rules doesn't applied
this is a live code example :
https://stackblitz.com/edit/react-ucvbgt-sur6ne?file=demo.js
thanks...
You should change your Menu to Drawer (with anchor = 'top')
Visit this to learn more : https://mui.com/material-ui/react-drawer/
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/
In Material Design Lite how do you specify the position of elements? I would like to show the sidebar under the navigation panel not on top of it like it is by default now: http://www.getmdl.io/components/#layout-section/layout
This isn't something support out of the box since it means the design will no longer adhere to Material Design. So if you wish to do this, you need to target the drawer in your own CSS and specify a top margin so it will sit below the navbar. Then deal with anything else that may break from the movement (I don't believe anything should though.)
I am creating a wordpress page with complex menu layout system.
This is a first for me to get stuck with menu.
My menu virtually looks like this, looks simple.
-main_menu_item's
--main_menu_subitem's
---main_menu_subitem2's
but, my site structure is not that easy.
I have horizontal -main_menu_item's on top of page,
after that there is slider and after slider comes horizontal main_menu_subitem's.
Now comes content part of --main_menu_subitem's and if it has ---main_menu_subitem2's they will be displayed on sidebar.
My problem is that how can i break one menu into three different blocks of code that i can display in different places?
MAIN MENU
-main_menu_item
______________________________________________________________________
SLIDER
SLIDER
______________________________________________________________________
SUBMENU OF MAIN MENU
--main_menu_subitem --main_menu_subitem --main_menu_subitem
______________________________________________________________________
IF SUBMENU HAVE ITEMS, ELSE ONLY CONTENT
---main_menu_subitem2 | content area
---main_menu_subitem2 | content area
---main_menu_subitem2 | content area
So, anyone seeing this easy and would like to give me a hand on this?
I've run into some trouble with Bootstrap 3.2.0. Basically, I have a header menu with some li elements and inline with that I have a simple login form.
Please see my code here
the problem is that the css in not correctly handling the left and right floated elements
Weirdly enough, everything seems to work when only a single input element is present, as you can see here
Please note that the html is taken directly from Bootstrap examples at
- http://getbootstrap.com/examples/jumbotron/
- http://getbootstrap.com/examples/dashboard/
p.s. the Jumbotron seems to work just fine with the login form but I'm guessing that is because there is no ul/li left floating menu
I'd appreciate any help you can offer
Thank you
Edit
Hey guys and thank you for replies so far. I'm not sure whether this is the expected behaviour
->
i.e. the login form is pushed to the next row, but I would expect it to collapse everything into a "mobile" type of menu before pushing the form down onto the next row.
Edit 2
p.s. the screenshot above is from Firefox 31.0 (and I see the same Chrome Version 36.0.1985.125 m)
A few ways you can handle this...
1) Customize the Bootstrap CSS so the menu collapses at a different screen size: i.e. at http://getbootstrap.com/customizer, change #grid-float-breakpoint to = #screen-md-min.
2) Add some of your own custom CSS to shrink the input fields to ~ width:100px at the right time, via a custom class added to the input-group, and a media query:
#media(min-width:768px) and (max-width:992px){
.custom-class{width:100px;} /* tweak this px-count to get exactly what you want */
}
3) Using Bootstrap's hidden/visible column classes, put the login elements within a popover for only the sm screen size. This is the "Advanced" option, and is probably overkill, but fun to try. It would be something like:
...
<div class="visible-sm">
<div class="popover" html="true">Put your inputs, button and other HTML here</div>
</div>
<div class="hidden-sm">
<input ... ><!-- Put your regular login here -->