I'm having an issue with my sites mobile navigation bar being scrolled past the view-able area when the browsers navigation bar is showing. I've tried a few things to fix it, however I cannot seem to get it working properly.
Before scroll down:
After scroll down:
Excerpt of my SCSS relating to the nav bar:
nav {
display: flex;
flex-direction: column;
float: left;
background-color: #3a3e4b;
height: 100%;
width: 100px;
position: fixed;
}
// body also switches flex direction to put the nav bar at the bottom.
#media only screen and (max-width: 720px) {
nav {
flex-direction: row;
height: 70px;
width: 100%;
}
}
Full SCSS available here: https://github.com/CorruptComputer/CorruptComputer.GitHub.io/blob/master/assets/css/main.scss
I looked through these but neither of them seemed to help:
Issue when resizing top navigation bar on mobile
How to create a sticky navigation bar that becomes fixed to the top after scrolling
This is an issue related to google chrome, that you will have to find a work around for.
When the chrome mobile top address bar appears, it pushes the page downwards and because of that you get this issue.
By scrolling the page, the top address bar will disappear.
Try this Javascript code, you can use it as a function or just as a single line on top of your Javascript file.
scrollOnLoad();
function scrollOnLoad() {
window.scrollBy(0, 1);
}
Or
window.scrollBy(0, 1);
Related
So, I am using bootstrap for my navbar. Thats all easy and simple and I have that implemented.
Since I have a header on top of my Navbar, I decided to put them both inside the same row div and give each a col-md-12 so they would align. I then did
#media only screen and (max-width: 500px) {
#titleRe {
width: 75%;
}
#navRe {
width: 25%;
padding-top: 1.5rem;
}
}
and it looks like this navbar uncollapsed. As you can imagine, collapsed, it looks amazing and they are side to side, but when uncollapsed I can't view the navbar properly (for the obvious reasons).
My question is: How can I make the Header disappear when I open the navbar, and make the navbar centred?
Thanks
Having a weird issue of position fixed not working properly. You can see it here: https://randohinn.com/uus/ When you scroll on your computer, the header satys in place ok, but on mobile, once you scroll, it moves by some 15 pixels so that the top half until my name letters start is not appearing. Why is it so and how could I fix it?
It might not be obvious, but the extra height is caused by extra width. Your <body> is wider than 100vw and causes a double-scroll effect, causing the fixed header to move around as you scroll the body.
You placed the following CSS rules in your main.css:
.row {
...
margin-right: -.5rem;
margin-left: -.5rem;
}
You probably want to wrap them inside a #media(min-width: 768px) {} query, similar to how Bootstrap does it.
Or, you can just set them to 0 on mobile:
#media(max-width: 767px) {
.row {
margin-right: 0;
margin-left: 0;
}
}
Just make sure you place this after the ruleset mentioned above.
The above fixed the issue for me in emulator, but the emulator is not always accurate. If you still experience the double scroll, use
#media(max-width: 767px) {
body {
width: 100vw;
overflow-x: hidden;
}
}
I built this very simple site for work and I found an issue related to the top navigation bar when resizing on mobile (please note there is no mobile version of the site, nor will be).
When resizing on mobile screens, the navigation bar remains fixed, while the content can be moved. This means that, while the navigation bar stays stuck at the top left corner and partially blocks the screen, the text moves freely under it. Please refer to the screenshots below:
Mobile: Example 1
If you check the source code, the top navigation bar is set to fixed. If I remove this line, resizing on mobile works fine, but the top margin specified for the content (so that it doesn't overlap with the navigation bar) becomes huge.
Changing this margin, however, affects the navigation bar when resizing the window on a computer, as you can see below:
Desktop: Example 1
It's been many years since I last worked with html and css, so please excuse me if I'm missing the obvious.
How can I find a solution to this?
This is happening because you given width and max-width 100% to your top class, If you want to fix this in mobile devices you need to write media query
Try below code to your css
#media (max-width: 500px){
div.top{
width: auto;
max-width: none;
}}
if you want to show navigation in mobile view then use below code.
#media (max-width: 500px){
div.top{
position: relative;
}
div.normal{
margin-top:200px;
}
ul.menu li{
float: none;
}}
I am having an issue on a mobile version of a website where the dropdown menu doesn't appear completely in view because of the position of the particular menu item and the amount of items in the dropdown
The image below is how i would like it to appear, so it would focus the area when the parent is clicked.
Would it be possible to have it so the menu scrolls down to show all the sub items when clicked ?
You can view website at http://www.ndb.ie/2016/. It's using the standard Bootstrap menu code.
You should override bootstrap style.
.navbar-collapse.in {
overflow-y: visible!important;
}
Put this CSS in your style.css file
For Center Menu in Responsive
#media only screen and (max-width: 767px) {
.nav-justified > .dropdown .dropdown-menu {
left: 50% !important;
margin-left: -80px; /* (Half Menu Width in margin left) */
top: 100%;
}
}
For removing Scroll in Responsive
.navbar-collapse.in {
overflow-y: visible !important;
}
I have a section in the header on the right side that scales down fine with the exception of how the right block of images are moving. The images resize just fine, but once I begin to scale down, They push into the logo div and then are placed above it.
How can I position them to place under the logo and line up accordingly while staying in the header and without just turning the display to none when I reach a certain screen size?
Here is a link for the jsbin of those images/badges. The live site is in Wordpress and the code is too much to post. Maybe if you just use Firebug or the dev tools.
This is the live version of the site.
Also as a sidenote: I have the -190px margin enabled on the live site.
Here is a screenshot just for reference:
I managed to fix the issue. I added a separate media query like so:
#media screen and (max-width: 479px) {
.badges-container {
position: relative;
text-align: center;
margin-top: 0px
}
.badges img {
width: 19%;
}