I have a top menu bar that is in position fixed and contains some text. When the screen is resized smaller it compresses and it's height increases to fit the text.
I have a div below the top menu bar that contains my website content, moved down using padding-top.
When the top menu bar resizes the top of the article gets covered by the height change of the top menu bar.
#topmenubar{position:fixed;width:100%;text-align:center;word-wrap:normal;}
#content {padding-top:40px;}
What is the best way around this so the resized top menu bar does not cover my content?
The Top menu bar has to always be visible at the top of the screen, so I guess how can I make the padding-top get bigger with the screen width getting smaller or another solution?
Pure JavaScript solution (no jQuery required):
window.onresize = function() {
document.getElementById("content").style.paddingTop = document.getElementById("topmenubar").offsetHeight;
};
jquery
$(window).resize(function(){
var h = $("#topmenubar").height();
$("#content").css("padding-top",h+"px");
});
You can get around this by removing width 100% to some fixed pixel width so that top menubar will not resize,
or at some extent by min-width property.
Related
I have a vertical menu inside a header. The header takes the whole width and height of the screen/window. It is also fixed on top. However when the height of the menu is bigger than that of the screen it get cuts off and I cannot scroll to see the rest of it. This does not happen when the header is not fixed but I want it to remain that way.
Here is a photo of the menu normally
Normal menu
and here is a photo when cropped
Menu cropped
use overflow-y:scroll in css. if that is not working you should be use important .overflow-y:scroll!important . i hope it will be work .
I have a request from the customer that the menu items position must not change when the page get taller and the scrollbar appears.
If the scrollbar appears, the width of the page get smaller and this is why the centered menu position shifts to the left. How can I preoccupy the scrollbar width so the layout stays the same when it first appears?
To see a live example of this effect
please visit http://getbootstrap.com/,
increase the height of the window that much that the scrollbar disappears and
navigate to an other page using the menu (such as http://getbootstrap.com/customize/)
You will notice that the menu items are shifting a bit to the left. How I may hide this effect?
Please help me to fix menu on the top of the body and that should be scrolled horizontally.
I used position:fixed for the particular <div> tag with top:0;left:0 values. But when I resize the window to 50%, the fixed menu appearing only 50% remaining part was got inside the border (not appearing).
Please make me to fix this problem to view the menu with scrolling when we decrease the window size..
You can use bootstrap this will help you to fix the nav bar and this will not disturb the page on resizing the content. You can see the example Here.
I’ve done a lot of research and have not gone anywhere.
I am trying to find a way to dynamically re-size a div when a sliding menu is expanded from the left side of the screen.
Ideally the sliding menu will resize the div's width as the menu expands.
Any suggestions would be great?
Here is a link to your solution:
http://jsbin.com/inayeg/2/edit
If you don't want to expand the menu on hover, but on click for example, you will have to use javascript.
For that, simply add a button with, eg id '#mybutton', then add this javascript:
var expandBt = document.getElementById('mybutton');
var menu = document.getElementById('menu');
expandBt.onclick(function() {
menu.style.width = '15%'; // expand menu
});
// record a counter for clicking collapse/expand, or place another button to collapse.
Note: you can of course replace percentages with pixels. Just don't float the #main div, because otherwise it will adapt its width to min-width and not max-width.
Here is my html work. http://jsfiddle.net/awaises/remqf/4/
I want to push the fixed div box to bottom of the screen. But it is overlapping on the left navigation and last items of the navigation getting hide behind the green box. Can we fix the green box as per following design? But we have to make sure that green box must be at the bottom of the screen even window’s resolution is small or large.
Design layout URL
http://www.thewebmakerz.com/screen.jpg
Does this .left-col{ height:500px;} fix your problem?
See this fiddle.
Three key tips:
Put "left-footer" in a different parent then your menu content (called "left-col-top").
"left-col-top" should be transparent, "position:fixed", with "z-index:1" and a min-height that is taller than your menu.
"left-footer" should be "position:absolute."
Looking at screen 1.1, if there is 11th list in yellow box, it will definitely go behind green box. (Also consider toolbars / menu bars in browsers). You may have to use something like "More Links >" in case height of screen is less.
Screen 1.2 and onwards:
If jQuery is an option, you can use scrollTop function.
Initially, let the green-box be fixed with position:fixed and some margin negative from bottom.
Then, when user scrolls to a particular amount (as seen in screen 1.2) try following jQuery code:
var yellowBoxHeight = $("div.yellow-box").height();
$document.scroll(function() {
if ($document.scrollTop() >= yellowBoxHeight - 100) {
// If user has scrolled some amount, eg. 100 pixels of yellow box is still visible
// make the green box animate & let it come upwards
} else {
// put the green-box back with some negative margin into the bottom
}
});