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
Related
I have flexbox layout with collapsible sidebar. I used 'fit' mode of jQuery colResizable plugin (JColResizer) created by Alvaro Prieto Lauroba v1.6. The problem is the plugin table not shrinking or can't calculate its width. The table widens but does not shrink.
It works perfectly in the plugin demo page but in my demo page it's not shrinking.
Plugins demo page
My jsFiddle
What am I doing wrong?
When I remove flex declarations and fixed position from div.dms-container it starts to work as its designed for: Widens and shrinks. All good. But I have to keep dms-container fixed to able to scroll longer table rows while keeping all other content still.
I am adding a menu to the side of my page using Bootstrap. I want the menu to stay at the top of the page when the user scrolls past it. I have discovered affix which is in bootstrap.js. However because I am using different col sizes for the screen I am struggling to get it to stay in the right place.
I have got it to start at the right time and to make it position the top correctly but the width and the right are not working.
I am using bootstrap 3.3.
I think that I will have to use percentages of the screen width and then also do media queries in the CSS.
JS Fiddle
I have solved it.
The element with affix needs to be a child to an element with a col- class on it. You then also have to set the width in pixels for each different screen width that bootstrap recognises.
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?
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 trying to create a sticky footer on a custom WordPress theme. I have looked at many online tutorials with no success.
It does not seem to be working responsively, it sticks, but as soon as I re-size the browser the height increases.
The footer needs to be responsive but also stick to the bottom of the page regardless of content size.
The website in question is:
http://shopexample.co.uk/
Would really appreciate some help on this one.
Thanks :)
The problem is not your footer expanding, it is related to image dimensions and body.
When you resize your browser (smaller), the background-images' size adapts to the viewport's width, not its height. That means that at a certain point, the image doesn't vertically fit the viewport anymore.
Then what is visible is the background-color of your body.custom-background, which is, coincidentally, exactly the same color as your footer's background (background-color: #cccccc;).
You can change the background-color of your body to distinguish it from the footer. You cannot resize the image to full-browser width AND height simultaneously without distortions.
Sticky footers: I noticed your footer & its wrapper are not positioned fixed or relative, which is the common approach for sticky footers. Then position it with the bottom property.
Fixed position:
will stick to bottom
will not scroll
will always be visible
Relative position:
will stick to bottom
will scroll
will only be visible on reaching page bottom
Check the working copy of your fiddle here http://jsfiddle.net/Mohinder/Yj6gu/
Problem was with headerwrap which was not closed where it should be and with body height.