The website I am working on does not use the Bootstrap navbar for desktop version, utilising the responsive navbar (and hiding the custom navigation) on the mobile version. The navbar, without the actual links, is present even in the desktop version, displaying the branding and the search form.
However, the problem is that the website ends up with three navigation types:
1) The custom navigation unit, used on the desktop version.
2) The collapsed navbar with a toggle button
3) The default "navigation links in navbar" on most of the tablets. I want to get rid of this one: there are too many links (can not do much changes to the website structure) and it looks noisy.
Is it possible Bootstrap's navbar always collapsed?
This is not a direct answer to your question, but I think it might help you resolve your situation.
Consider using the Bootstrap Responsive Utility classes to hide certain navigation elements. For instance, maybe apply the hidden-desktop class to the menu items inside the navbar.
Scroll to the bottom of this page to see the classes:
http://twitter.github.io/bootstrap/scaffolding.html#responsive
Related
I recently designed a one-page website for myself using the latest Concrete5. My site uses a dynamic sticky nav which later turns into a fixed nav to the top when I scroll down. The tool bar covers the fixed nav and I cannot see it again until I scroll back to the top.
What I am interested in is this. Is there a way to have the wrapper class that C5 needs for editing to behave like an iFrame from days gone by. The effect that I am looking for is that everything under the toolbar be the website and still be editable.
When the concrete5 toolbar is visible, the html element in your HTML will have the ccm-toolbar-visible class.
With this class, you can change your navigation behavior based on the toolbar visibility. A common approach is to set the navigation position from fixed to static when the toolbar is visible.
Additional information on this topic can be found here:
https://www.concrete5.org/community/forums/customizing_c5/theme-fixed-header-in-admin-mode/#860110
https://www.concrete5.org/community/forums/customizing_c5/trying-to-make-a-header-stationary/#762608
I am currently working on an AngularJS project for a tablet with the basic navigation through all the different pages. The project consists of all the basic features like Side Navigation Menu, a Header, the links of different pages, and a Footer.
The project is also created responsively using Bootstrap. I am not facing any responsiveness issue in all the elements created in the project except one.
When keyboard opens, the responsiveness gets disturbed.
Basically, the header div position gets distorted, the footer shifts above and gets placed right above the keyboard opened, and the side-navigation width also gets disturbed.
I tried the following things -
Used position: fixed, position: relative but nothing changed.
Looked into many different SO question links but got no fruitful result.
I have one option (hack) left that is stated in this SO answer given by Roberrrt but that's a long process and I'm short on time and doubt if it will be a positive hack.
Any help would be hugely appreciated.
Update :-
Giving an idea of how the structure of my project is -
This is the main page where a search box that is in-built in DataTables is used. The Header, Footer and Side-Navigation Burger Menu Button are as described here.
When clicked on the Burger menu, the side-nav opens in full-width as shown below -
Now on clicking the search box the following screen shows with all the elements distorted and responsiveness screwed -
For reference purpose, The theme that I'm working on is Inspinia
I need to set the Material Design Lite drawer menu so that the hamburger menu is displayed permenantly. The menu must be shown only on click.
There is no documentation available about this. Thank you!
link
I'm going to be honest with you and say I'm not sure what your asking, however.
If you are referring to the hamburger not displaying at all assure that your mdl-layout has the mdl-js-layout
Did you add the menu at runtime? If so, assure that the dom is updated after the fact
//yourCodeThatModifiedTheElement
componentHandler.upgradeDom();
Or is the navigation not showing up at all? Certain breakpoints will hide the navigation in which case you can have the header fixed which will display on all screen sizes by adding mdl-layout--fixed-drawer to your mdl-layout
I just started with ROR and I'm following the One Month Rails tutorial. This includes the Bootstrap responsive navbar. I now added some pins to my pinterest clone. I noticed that the scrolling does not work when the navbar is in full size. when i make the browserwindow smaller so the navigation gets into the small navigation symbol i can scroll the page. You can probably see best on my heroku link: morning-shore-7790.herokuapp.com
It would be great to get a hint on how to solve this.
Thanks a lot
Looks like you've nested the container class inside the navbar, which will always cause this behavior.
If you're using ERB it means you didn't close a div where you should have, if you're using haml or slim it's most likely an indentation oops. If you use chrome, safari or firefox you can see this clearly, just inspect the element and collapse the navbar, if all other content is contained within that, you still haven't fixed it.
If you still have questions post your layout and your index.
I am just developing a child theme of WordPress twenty eleven theme. The live demo can be seen here. As WordPress has already responsive support I am also doing my theme in responsive for that I am customizing my theme CSS. For some of the part I am done. In my menu part I am facing some problems. I have two types of menus. One which doesn't have dropdowns and the others which have dropdowns. Now I am facing the problem in the menus which have dropdowns in responsive. So can someone kindly help me here?
This seems like more of a design issue than a technical one. I would recommend either 1) turning the drop down menus into accordion menus (e.g., tiny accordion), or 2) extending the drop down menu region and increasing its z-index so that you can only hover over the drop down and not activate anything that appears underneath it. For your design, this might mean increasing the z-index and using something like margin-top: -2px; on the drop down menu's children.
The idea of responsive design, however, is that you make it available for small devices, like smart phones. Since smart phones that use touch don't have hover states, you're probably better offer using suggestion 1 above, where a user clicks on the initial menu, which then displays its sub-menu.