I've created a few vertical menus in the past on bootstrap using the dropdown-menu compontent. To make it a megamenu I would have to specify a specific width for the submenu to flyout to - a definitive width. This is because the vertical width(parent) is too small.
The problem is the content is dynamic, so it would be good to have this width flexible - by using %'s, as at the moment we have to mould the content to fit the menu. If I add the col-lg-12 class to the submenu it will only be 100% of its parent width (the vertical width), I can't increase the vertical width as this would span across the page.
I want something like this - http://geedmo.github.io/yamm3/
However, the yamm3 example is a horizontal nav, therefore the parent is already spanning across the page to give the submenu a huge range to add whatever col-lg-?? it likes.
Does anybody know how to turn the Yamm3 example into a vertical navbar but keeping the flexible mega-submenu width without being restricted by its parent?
Related
I'm having trouble creating Navbars while implementing Grid LayOut.
https://codepen.io/Aeshtray/pen/BdqeZL
In mobile view, I want the Navbar to be horizontal (as coded), but fixed,
whereas after the first breakpoint, at 500px width, I want the Navbar to be Vertically Fixed on the left side.
I already tried setting the position: fixed but that only jumbles up my whole layout.
Made some css tweakings, checkout this fiddle https://codepen.io/anon/pen/LjgoKE?editors=1100
Updated pen: https://codepen.io/anon/pen/BdGBBo?editors=1100
I got a navigation menu as image. I made a nav div with the image as background and a fixed width and height. Now in the little boxes under the lines I want nav links. So what I did is I made multiple divs in the nav div and positioned them in the little boxes. So they are all positioned perfectly inside firefox but, unfortunately in other browsers like chrome they have different positions (nothing extreme, but they arent perfectly aligned in the little boxes).
What I thought was that whenever you have a certain fixed height and width of the container div. The margins of the child divs will be the same on all browsers and screen sizes as they will always be the same size. How is this possible and what would be the best options to make this nav menu possible?
Try use this http://www.image-maps.com/ ... image maping tool lets you to set link coordinates.
If you know where these boxes are located pixel-wise in the background image, you could absolute position the nav divs and get them precisely where you want using top and left based on pixels of the parent div (with the image) instead of using margins.
I am building a web site for home made jewelry. I'd like it nice and centered ( for all those ppl with low resolution ) so all of the titles, navigation and content are in a single div, that I positioned in the center. On the left ( inside the div, everything is inside the div ) I have my vertical navigation sidebar div. On the right I have the title and the content. So far so good. Now to the problem:
I would like my sidebar to have a right border all the way from the top of the page to the bottom ( with 1em margins if possible ). The trick is that my content to the right variate from text to pictures and forms and is quite different on every page - when the content is larger then the screen the screen scrolls and in which case I'd like my sidebar border to scroll down with it - I've not been able to do that.
I think I have done quite a reading - my closest solution was to set the border's position to static but this quite obviously isn't working when the site is centered. So to the question - is there any CSS only way to make the sidebar div's height dynamic or something and define it to expand with the content to the right? This way the border will always reach the bottom.
Wrap your navigation in another div. Give this new div a height of 100% and assign it a border-right CSS property. You can also set padding too. Hope this helps.
How about giving left border to the content section Div, instead of Nav menu. so that way the border could change height according to the content area height
body,html{
height:100%;
}
#wrapperdiv{
height:100%
}
#navigation{
min-height:100%
}
Currently I am working on a maintenance of website and I'm stuck with an problem, the problem is like that: I have to redesign the menu bar of the website. Previously in the menu bar there are 6 menus but now there are only 5 menus in it. I have to delete one menu item from the bar. I simply deleted that row from the list items of the menu bars. In the previous designed they used the display property of css to create the blocks but after deleting the one menu the space for one menu item is left, while i like to increse the width of the menu bar.
Without seeing the code, it is hard to say.
However, in your stylesheet you can adjust the width for the list items as such
.menu li{width:35px;}
To figure out how much to adjust, take the width of the last element and divide by 5 (the number of the remaining list elements).
So, if your width was 50px, add 10px to the element style so that each of the remaining elements covers the width of your previous list-item.
Maybe a brute way to this but it actually works great:
Use table instead of list. I use this with some padding offset because spaces between cells are linear based on cell content size and padding gives you constant minimal space between menu elements.
Another way is to use block elements and CSS display:table and table-cell but remember IE7 does not know these ones.
Benefits: no Javascript
If the menu item <li> has a fixed width, then the total width of the menu divided by 5 gives the width of the each menu item. check in the css for the tag "li" or the class specified for li. then change the width of that to the new width
I have a layout with a variable-length menu on the left, and variable-length content on the right. In between the menu and content is a divider implemented using a repeating background image, which is part of the content div. This means that as the content expands or contracts, so does the divider.
If the height of the content is less than the height of the menu, the divider is still the height of the content, when what I really want is the divider to be the height of the menu in this case. Is there any way to implement this in CSS?
Have the dividers background image in the content are and the menu and have the content area overlap the menu the width of the divider using negative margins or something similar.
An alternative would be to use the background image on a wrapper div and use background-position to place it between the menu and content divs.