I'm working on a live mockup page but running into issues with the navbar showing on top of the logo image. I've researched for answers and tried them but are not working as expected. How can I fix it so the navigation isn't layered on top the logo? I'd also like to either adjust the nav to the top of page when in mobile size, logo becomes hidden or keep the logo visible on the navbar in mobile size. This will also require media query breakpoints to smooth the transition of desktop to mobile. I'm kind of new bootstrap. Any help is appreciated. Thanks
link to image mockup
link to live webpage mockup
link to css override
Looking at the live webpage mockup link, you have
.navbar-fixed-bottom,
.navbar-fixed-top {
position: fixed;
right: 0;
left: 0;
z-index: 1030;
}
the z-index is overlapping all of your elements.
add
position: relative;
z-index: 99999;
to your .row-img class
Related
I'm making a new website where I want my navbar fixed top when scrolling. It works, but on mobile there is white space on top or bottom when we scroll. The problem is than I have a nav coming from left side on mobile. This nav doesn't moove when I scroll, no the top navbar go under the left navbar and its really ugly.
Here is my website if you don't understand https://www.hytalefrance.net
I've tried something like this:
overscroll-behavior: none;
But It change nothing
body {
height: 100%;
overflow: auto;
}
Do nothing to
It's a classic bootstrap 4 navbar, but I don't use fixed-top class to make it fixed, it's a custom class similar to fixed-top
.sticky.is-sticky {
position: fixed;
left: 0;
right: 0;
top: 0;
z-index: 1000;
}
I would like the whitespace on mobile disappears.
Some screenshot taken on my mobile (iPhone 6)
I'm actually scrolling down:
When nav is open:
When I scroll with nav open:
I guess you're taking about inertial scroll behavior caused by over scrolling a webpage in iPhone. There is no ideal fix for this problem.
There're few partial solutions that may / maynot work in your case
- How to disable inertial scrolling on body for iOS browsers?
- ipad safari: disable scrolling, and bounce effect?
Though, It is not recommended to prevent it. Doing so will intercept natural scroll smoothness in browser.
I'd suggest you to set your body's background color to the exact bg color of your nav bar to make it less obvious
I fixed the problem by removing my js function. On desktop navbar will not be fixed, on mobile the navbar is now directly fixed, and it works
on my website https://koengeter-immobilien.de i have a centered logo with a shrinked header. I centered the logo with the css command
.html_header_top.html_logo_center .logo {
transform: translate(-63%, -2%); }
It works fine in Google Chome and IE. But in firefox the logo is above the menu when the the website is scrolled.
I cant find a solution for firefox.
Can somebody help?
best regards
The div menu must be positioned absolute:
#header_main_alternate {
z-index: 2;
position: absolute;
width: 100%;
}
If you inspect the code you can see the 2 divs stay one over the other.
I'm developing a web site based on the Hyde theme for Jekyll.
This layout uses a fixed navigation bar on the left with 100% width. This is working fine in most situations.
In Safari on iOS, however, the height of the viewport changes while the user is scrolling as the browsers top navigation bar collapses. If this happens, the navigation bar's size is not updated until the scroll stops, leaving an area in the lower left corner that is not covered by the navigation bar:
(Notice the text extends below the navigation bar. This screenshot was taken while the page was in motion.)
This video shows the problem in action.
Is there any way to force Safari to update the navigation bar's height while the scroll is in progress?
its an ongoing discussion. There is no real solution for this problem. https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in-some-mobile-browsers.html
What you can try for your website is the following:
.sidebar {
position: fixed;
left: 0;
bottom: 0;
width: 18rem;
text-align: left;
height: 100vh;
}
This will align the sidebar to the bottom and the text wont cut. The white bar will appear on top but it wont be too intrusive as the bottom being cut out.
Add the below styles to fix the issue
html,body{
-webkit-overflow-scrolling: touch;
}
Here you find the reference
Got a question specifically about the background image on a simple site I'm building.
http://polyamsterdam.nl/
The background image in question is behaving like it should (or at least as I want it to) on my laptop. It sticks to the bottom right corner of the screen.
On mobile (tested it on iPhone so far) the image also sticks to the bottom right corner but if there's more content then fits the screen the background image is pushed to the bottom of the page (instead of just the bottom of the screen).
Haven't been able to find a solution in the archive so I hope someone is able to help.
Thanks, Peter
I only tested in browserstack but adding this fixed the problem in Chrome for Android:
body, html {
height: 100%;
}
Edit:
I misunderstood the question. The best way I can think to fix this is to apply the background to an element that has the dimensions of the screen and has position: fixed set to it. The way backgrounds work, you will always get the image pushed to the bottom. Don't forget to set the z-index correctly (to -1 for instance) to make it stick to the back of the page.
So, in your HTML:
<body>
<div id="heartbackground"></div>
<!-- the rest of your HTML... after this -->
</body>
Then in your CSS
#heartbackground {
position: fixed;
width: 100%;
height: 100%;
bottom: 0;
left: 0;
}
This wordpress website http://www.sulu13.net/14 has a responsive logo and menu that I wanted centered in order to line up with the edges of the content below in the posts. So I added:
.tc-header .brand a { /* Logo */
position: relative;
left: 200px; }
.navbar .navbar-inner { /* Navbar */
position: relative;
top: 130px;
left: 380px; }
Upon adding this CSS, the screen gets a horizontal scroll bar and has white space (equal to the left: 380px) on the right side of the screen. Something tells me it has to do with the responsive menu button sharing the same classes, .navbar .navbar-inner as the non-responsive menu. I would change this, but my knowledge of PHP is limited so I wouldn't know where to start.
I've tried removing the JQuery menu itself, but this had no effect, (my guess is..) because I didn't actually remove the responsive menu button/menu.
Here's the main CSS file - http://www.sulu13.net/14/wp-content/themes/customizr/inc/css/green.css?ver=3.1.6
Any ideas would be appreciated, thanks in advance for your time.
Ian
width:100% (default width) + 380px (left value) = 100% + 380px
You would need to resize the navigation to compensate for the moving over if you want it to leave it the way it is, meaning something like width:calc(100% - 380px);
However, I'd recommend not using absolute position to be more responsive and not require the manipulation of values.
Remove the left:380px
Apply this:
#menu-my-menu {
float:right;
}
This approach also allows more list elements to be added and they will automatically be positioned correctly
Use this:
.navbar .navbar-inner { /* Navbar */
position: relative;
top: 130px;
}
So, remove the left:380px. I don't understand what you mean by centering the menu and aligning with the text below, as the container of the text is wider than the one of menu and logo together and if you align the menu with the post below it will not be centered anymore. But removing left property should give you what you want.
Thanks for the help guys!
I went back and gave it a closer look, turns out I was able to solve the issue with a wrapper and a few media queries for width adjustments.