I have the following navbar that, when open on mobile, should have a background that covers the entire screen.
The problem is that with my current implementation the contents of the navbar "jumps" down the screen a little bit. I want the navbar-brand and the links to remain where they would without jumping.
See this fiddle for an example showing the code I've tried and the current problem.
Removing the height: 100vh directive removes the "jump", but then the background of the open mobile navbar no longer covers the entire viewport, which is what I want without the jumping.
Thanks for any suggestions!
Related
I made my first Wordpress for learning purposes. I have downloaded Themekraft, and I added my own customized bootstrap header navbar, because I want to customize as much as I can.
I have some sections (only "inicio" and "articulos" are working), but when there is an article with photo (sometimes without photo happens the same), I have realised that blue navbar moves.
I tried to fix it in many different ways (adding a max width for the body
and navbar, deleting a lot of margins and/or paddings...), but I have only discovered that it is a problem of paddings... I think.
I mean, when I add, for example, a padding-top:10px for the body, everything seems to be ok... until I have an article or two. When it happens, it seems i have to add more padding-top on the body in order to "fix" the problem.
I have searched on SO suggestions, looking for some clues, but I found nothing.
Bootstrap navbar moves right on scroll
Bootstrap navbar covers top of section when linked
What could I do? I have uploaded the site to a server so you can check it.
http://pruebaint.esy.es/
As far as I can see it the issue is not any of your padding. Its the scroll bar that is causing the problem as the content moves somewhat to the left. If your page has lesser content without vertical scrolls you will not see the nav moving.
Is there any other problem that you see apart from horizontal movement?
I am trying to implement an off canvas menu in my Wordpress site. Instructions on coding the menu are taken from this site:
http://tympanus.net/Development/OffCanvasMenuEffects/sideslide.html
The problem is that when you open the menu and the mouse is on the menu I cannot scroll the site contents beneath the menu. This is specially important in the mobile version since the menu takes much of the space on the screen so being able to scroll the site contents is very important.
So basically I want the menu to not be scrollable, but the site contents should always be scrollable whether the menu is visible or not.
I fixed it using the javascript fixes mentioned here:
A way to scroll an underlying div when mouse is on top of a fixed div?
#howard-e Thanks for taking the time to look at this.
I'm working for a responsive website on a slider like FB App. It works fine, but if the user scrolls, the open navigation moves with the content. I'm trying to put position: fixed to the element. This works,but if the navigation element is larger than the screen the rest of the content cannot reached. Example: http://lucie-hauri.com.beethoven.ch-meta.net/ (just put the screen to a width of about 300px an the mobile Icon appears, click on it for example).
Has anyone an idea how to fix this?
Thanks for help, regards
Thomas
I don't know if this is the cause, but you have a javascript error (check the console), which may break things up.
I'm using Twitter bootstrap with a project I'm working on at the moment and I'm seeing a white border appear around the main header and footer when I make the screen a little narrower.
You can see the same problem on Font Awesome which also uses Bootstrap - just make the screen a little narrower and you'll see a white box appearing on the right side of the screen at the header and footer.
Anybody know what's causing it?!
I'm building a test mobile website for a client: http://preview.stafforce.co.uk/mobile/
As you can see, upon the loading the website on a mobile device or on the desktop using the correct viewport size you will see a red box with three options. The red box is the page itself told be red by a class of splash. (I had originally had this as a separate DIV that sat ontop of the page using position fixed, but that had several issues with positioning).
On the desktop this works fine, but on the mobile device e.g. iPhone using Safari when the toolbar disappears and/or you scroll/change orientation you get a black bar, this is because the body is appearing as the div is not taking up the full size of the screen (jq mobile uses min-height which is done using the framework to make this happen).
Any ideas on how to fix this? Or had similar issues? Also noticed when doing the transitions that they appear cut off in places again likely attributed to this min-height not getting things correct.
Example:
Edit: The reason I have changed the body to black is because when you do the flip transitions, this is what you see behind, and black is the correct colour for the background when doing transitions on phones such as the iPhone.
You should use Jquery mobile enhanced 'listview' and keep your content in DIV with data-role='content'.
Jquery mobile will make your content fullscreen.
You should not style listview or anything else manually.
Here is the demo: http://jsfiddle.net/nachiket/YSp3x/
I haven't set icons and your logo, but you will get idea.
If possible use Jquery mobile Theme Roller for base styling, and do customizations on top of it.
EDIT:
You can set color on div which has data-role="page".
Like:
.myPage {
background-color:#ff0000;
background-image:none;
}
And in HTML
<div data-role="page" class="myPage">
I have already updated jsfiddle link.