In the pic I have attached, when I click on any item in the left side nav menu, the page in the right loads but the menu remains fixed and does not load.
How can I make a menu like this?
Can I do it using div? or Do I need to use
enter image description here
Related
Good evening community,
I have a problem related to a vertical menu that is scrollable when there are more items in the menu than the page can take vertically. If I scroll down to an item that is not displayed on the screen when I'm at the top of the menu and I click this item to get to the respective page, the page will get loaded but the menu jumps back to the top, so that the item i just clicked is not displayed on the screen again. But I want that the part of the menu with the item is shown when the new page is loaded and not the top of the menu.
I'm developing my site with python and django and using bootstrap for frontend, if that helps with my problem.
I will add some pictures to visualize my problem. Sadly i can't post pictures directly yet.
Starting Position 1 <- This is the top of the menu with the page 'Einführung' loaded
Scrolled Position 2 <- This is the scrolled position and I want to click the 'Print-Funktion'-link
Top Position 3 <- This is the menu after I clicked on the link (top position)
Scrolled Position 4 <- This is the menu when I scroll down after I clicked on the link
I numbered the pictures for easier reference. Currently the menu is in the state of the 3rd picture after I clicked on the link but I want the menu to be in the state of the 4th picture.
Edit1:
I forgot to add how I made the menu scrollable. I used the malihu-custom-scrollbar-plugin. The Plugin
Thank you in advance for your answers!
I've found a solution which is not perfect, because it will always jump to the top for some milliseconds after clicking on a link and then to the desired position.
I've used this when the page is loading
$(selector).mCustomScrollbar("scrollTo",position);
I have made a responsive navigation bar, but when the screen gets small and I click on the toggle icon to expand it, my toggle icon gets shifted from right to left.
Here is a screenshot of the problem.
A link to my code:
https://github.com/Anonsatyam/Responsive-navbar
It is because you forgot to add "px". See this image.
I have a navbar on my page where the left hand side contains a bunch of views and the right hand side contains a bunch of actions (eg. create)
On mobile devices, I want the left side to collapse into a dropdown box while the action commands on the right stay the same.
I can get this working but I can't get it looking right. I have some working code here.
http://www.bootply.com/OEYfZVIaGA#
Basically, the problem I have is on the mobile view, when I click on "Toggle view", it turns the entire navbar into a dropdown list and drags the right hand side buttons down as well.
I would like it to act just like a standard dropdown list (http://getbootstrap.com/components/#dropdowns-example). I would be happy if it didn't drag the New button down when I opened the dropdown list.
How do I customise the behaviour of the drop down list from a collapsed navbar?
I've been working on my site: www.zdrctry.com.
I have a couple questions about the top navigation bar (containing Home, Contact Us, Cart, My Account):
How could I move the navigation bar down to the same level as the "Directory Theme" logo. It is similar to the Red Header of website: www.premiumpress.com.
I'd also like to know how to align the navigation links to the right side of the page.
How could I achieve this?
Put your navigation bar inside a div and make the div's width 100%. Now for the CSS for your nav bar element, put text-align: right.
To move the bar down, use absolute positioning and specify how far from the top of the page you want it.
In my JSP page There is a menu with 14 options in the left side and menu description at the right side. I have created hyperlink in the same page on the menu click. Menu description has lengthy stuff. And the size of the page is much more than the menu. My problem is when I click on any menu item at left excluding first menu item the page scrolls down and menu disappears. Is there can be any way to make the left side (menu) unscrollable, and fixed in the position. Only The right side of the page will scroll. Thanks.
There are several ways:
make left div position:fixed
make height of right div fix and give overflow:auto