Hello Friends,
I need you kind help please. My website is tripmagics.com
There is problem of top margin in mobile. In mobile top heading about us is hiding behind top menu. In desktop/laptop its ok. https://tripmagics.com/about-us
And also if you go to destination in top menu in mobile its not scrolling down, it’s stuck. In desktop its ok.
Kindly tell in which file/css etc I need to add which code or line of code
Really appreciate. I thank you in advance. Good day
It’s also hidden on desktop.
In desktop its stuck also:
The problem is that you are looking only at your own screen width/height and not anyone else’s. It all depends on the size of the screen as to whether the items are broken or not. Nothing to do with mobile as such except that they have smaller screens.
The issue with the drop menu is that you have a position:fixed nav and anything that goes below the viewport bottom cannot be reached unless the fixed element is contained within the viewport and has a scroll mechanism enabled.
The missing heading that goes under the menu is a similar issue in that fixed elements are removed from the flow and therefore any other content is obscured by them.
In your page you put 2 empty p tags to create space (never do that) but as your top menu wraps that space is not enough to show the heading.
I suggest that instead of position:fixed you use position:sticky instead which will preserve the initial space and then you can remove the 2 empty p tags from the html.
Then you can enable a max-height of the viewport height and set the overflow to auto.
.fixed-top{
position:fixed;/* fallback*/
position:-webkit-sticky;
position:sticky;
max-height:100vh;
overflow:auto;
}
Now the item will scroll and the header won’t be obscured.
You really should use some media queries and adjust that heading on smaller screen size. You are currently allowing it to wrap to 2 lines which looks awkward and almost fills half my mobile screen before you start and obscures most of the content.
Hey PaulOB,
Thank you for your kind reply.
As per instruction, I have deleted 2 empty p tags from the html
And added viewport height in css but it made the problem worst, I then tried max-height:50vh also, but same. For some hours you can see on website.
Regards,
And now I tried to do that to add in about us and contact page in <head></head> tag and that also giving same result
There is no trace of the code I gave you on your website. Here’s the proof.
You can clearly see that my styles for fixed-top are not present anywhere.
That wouldn’t be useful . 
It has to be the full viewport height to be any use.
With my code added the page looks like this on an iphone.
I suggest you try again check your cache is cleared
Thank you once again 
you are very helpful.
I have added your code on contact page https://tripmagics.com/contact_us.php
It’s showing menu scroll option in mobile now but with lots of gap (means not perfect).
With your code mobile menu is now scrollable but as you can see contact page, in desktop/laptop dropdown menu is not working.
Kind regards
OK, It’s actually working but its going behind the map. There’s a bit of a catch22 going on with this menu.
Before I get too deep in changinging everything can you try this first? Bootstrap has a default sticky menu and if you change the class in the html to sticky-top it may be set up to work already without extra css.
e.g.
<nav class="sticky-top">
It won’t be perfect but on testing it seems to allow the mobile menu to scroll (although you need to scroll at the edge of the phone).
To be honest that nav design is not really made for small screen and I would have put the search bar, and nav menu all in a slider that slides in from the side and fills the page. You would just make the hamburger button sticky (or fixed positioned at the top).
Thank you for your kind help again.
Yes, it worked after adding sticky-top but again menu is not scrollable in mobile, that means same old problem. You can check in contact page please.
And when I added your previous code, now the top gap in mobile & laptop is too much.
It is scrollable on my iPhone but is a bit awkward as I mentioned due to the menu blocking the page scroll. This is an issue for all scrollable elements on mobile which is why you have to code specifically to avoid this.
Here’s a screenshot showing it scrolling.
I’ll take another look later and see if there are any other options.
ok thanks a lot for your kind help and time
You’re welcome
Sorry I can’t give you a full solution but here’s something else you can try.
Leave the sticky-top class in place as that seems to work ok and then add this extra code for smaller screens.
@media screen and (max-width: 982px) and (max-height: 800px) {
.sticky-top {
max-height: 100vh;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.sticky-top .bg-white {
border-bottom: 2px solid #000;
border-top: 1px solid #000;
}
}
Try that and see if it’s getting closer. The code above should only take effect once the hamburger menu is present. (No guarantees though ;))
Also note that the extra space you were talking about is because you have inserted numerous breaks. e.g.
<br><br><br> <br>
<div class="slider etc...
They are not needed now that position:sticky is being used so you will have to manually remove them.
OFF - TOPIC Note that in most pages you will rarely need to use a break (<br>) because they are only meant to create a new line in structures like an address or a poem or between form elements (although there are better ways than that). Breaks are a structural element and never meant to create space as such (indeed in older browsers two breaks in a row were sometimes collapsed into one break only anyway).
Making space between elements is the job of margins and padding and can usually be done without adding extra elements.
I’ve thrown it all into a private codepen so I can test on my phone and it works well with the adjustments above.
I also tweaked the styling as you were overflowing the screen and nothng was aligned properly at the top.
All the css so far is as follows:
@media screen and (max-width: 982px) and (max-height: 800px) {
.sticky-top {
max-height: 100vh;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.sticky-top .bg-white {
border-bottom: 2px solid #000;
border-top: 1px solid #000;
}
}
.sticky-top > .container-fluid:first-child > .row > div {
margin: auto;
}
@media screen and (max-width: 992px) {
.sticky-top .fluid-img {
}
.sticky-top > .container-fluid:first-child > .row > div {
flex: auto;
width: auto;
margin: auto;
}
.sticky-top > .container-fluid:first-child > .row > div .btn {
padding: 0.5rem 1rem !important;
}
}
@media screen and (max-width: 892px) {
.sticky-top > .container-fluid:first-child > .row > div {
flex: 1;
max-width: none;
}
.sticky-top > .container-fluid:first-child > .row > .col-md-3 {
flex: 1 0 100%;
}
.sticky-top > .container-fluid:first-child > .row > .col-md-3 img {
display: block;
margin: auto;
}
.sticky-top > .container-fluid:first-child > .row > .col-md-12 {
max-width: 150px;
}
}
@media screen and (max-width: 600px) {
.sticky-top > .container-fluid:first-child > .row > div.col-md-5 .form-row {
display: flex;
flex-direction: column;
}
.sticky-top
> .container-fluid:first-child
> .row
> div.col-md-5
.form-row
.col {
padding: 0;
margin-bottom: 10px;
}
.slider-wrapper {
top: 0;
}
.sticky-top #navbar li {
padding-right: 0 !important;
}
.sticky-top .product-search {
margin-right: 0;
}
.sticky-top .search_inetnation_des .row {
margin-left: 0 !important;
}
}
I removed the breaks and empty p tag from the html in the codepen. You should be able to fork (or copy) the codepen so that you can test more easily. I will remove the codepen in a couple of days.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
