DMXzone Bootstrap 3 Navigation Support Product Page
Solved
Fixed top overlap problem
Reported 16 Jun 2015 09:43:34
1
has this problem
16 Jun 2015 09:43:34 David Woolley posted:
I've created a navbar using the Fixed Top option for a one page site, using anchors for navigation.However the container below the navbar is not positioning correctly. It overlaps the navbar, so the first line in the cell below the navbar is hidden.
When I select Static Top, the container below the navbar positions correctly.
Cheers
Dave
Replies
Replied 16 Jun 2015 10:48:30
16 Jun 2015 10:48:30 Teodor Kuduschiev replied:
Hello,
Please provide a link to your page.
Please provide a link to your page.
Replied 16 Jun 2015 11:53:06
16 Jun 2015 11:53:06 David Woolley replied:
Hi - just starting with a new site, so not online yet.
Should I get back to you when I've put it on a testing site?
Dave
Should I get back to you when I've put it on a testing site?
Dave
Replied 16 Jun 2015 12:50:43
16 Jun 2015 12:50:43 Teodor Kuduschiev replied:
Well, okay then i can guess you forgot to add padding top to the body:
Replied 16 Jun 2015 13:28:32
16 Jun 2015 13:28:32 David Woolley replied:
That sorted it out Teodor
Thanks
Dave
Thanks
Dave
Replied 17 Jun 2015 08:24:03
17 Jun 2015 08:24:03 David Woolley replied:
Not quite sorted yet Teodor.
The anchors also require similar padding of 50px so they display below the horizontal menu at the top.
I added a class for the padding to each <a>
This works for desktop viewing, but when the menu collapses for mobiles/tablets, clicking on a menu item does not collapse the menu back again, so that the top part of the corresponding link in the page is hidden, as it is behind the vertical menu.
Why does the vertical menu not re-collapse in this situation for a one-page site with anchor links to each section?
Cheers
Dave
The anchors also require similar padding of 50px so they display below the horizontal menu at the top.
I added a class for the padding to each <a>
This works for desktop viewing, but when the menu collapses for mobiles/tablets, clicking on a menu item does not collapse the menu back again, so that the top part of the corresponding link in the page is hidden, as it is behind the vertical menu.
Why does the vertical menu not re-collapse in this situation for a one-page site with anchor links to each section?
Cheers
Dave
Replied 17 Jun 2015 08:44:37
17 Jun 2015 08:44:37 Teodor Kuduschiev replied:
Hello,
Not sure what exactly do you expect the navigation do on mobile? Are you expecting it to close itself when you click on a link ?!
Not sure what exactly do you expect the navigation do on mobile? Are you expecting it to close itself when you click on a link ?!
Replied 17 Jun 2015 08:57:02
17 Jun 2015 08:57:02 David Woolley replied:
The menu closes itself normally on mobile if one has separate pages in the nav - why are you so surprised?!
It does not work when the navs link to anchors on the same page.
Dave
It does not work when the navs link to anchors on the same page.
Dave
Replied 17 Jun 2015 09:52:27
17 Jun 2015 09:52:27 Teodor Kuduschiev replied:
Well, that is exactly what i am saying. When you click on a link, that sends you to another page and the page refreshes ... this resets the menu, as you are loading a new page ...
On a single page it is not supposed to and not working like that.
On a single page it is not supposed to and not working like that.
Replied 17 Jun 2015 11:40:59
17 Jun 2015 11:40:59 David Woolley replied:
In the BS3 navbar manual page on Advanced: Create Onscroll Navigation, perhaps you should mention this.
I'll try without the Collapse option, so the menu is horizontal at all times.
By the way I see no mention about adding padding-top=50px to the body tag in this tutorial.
I'll try without the Collapse option, so the menu is horizontal at all times.
By the way I see no mention about adding padding-top=50px to the body tag in this tutorial.
Replied 18 Jun 2015 07:52:36
18 Jun 2015 07:52:36 David Woolley replied:
OK I've found a simple solution:
For each menu item add these 2 extra selectors:
data-toggle & data-target
For example:
<li><a href="#services" data-toggle="collapse" data-target=".navbar-collapse">Services</a></li>
Now clicking the mobile menu item collapses the menu back to the icon button when one has a single page with navigation links to anchors down the page.
For each menu item add these 2 extra selectors:
data-toggle & data-target
For example:
<li><a href="#services" data-toggle="collapse" data-target=".navbar-collapse">Services</a></li>
Now clicking the mobile menu item collapses the menu back to the icon button when one has a single page with navigation links to anchors down the page.
Replied 28 Nov 2023 07:40:54
28 Nov 2023 07:40:54 henry james replied:
Hey Dave! It seems like you're facing a positioning issue with the container below your navbar when using the Fixed Top option. The overlap is hiding the first line in the cell, but switching to Static Top resolves the problem. To fix this, you can try adjusting the CSS properties like z-index, margin, or padding. Now, let's talk about the using SRD (Status Check, Resolution, and Decision-Making) in our daily lives. Just like troubleshooting your website, sassasrdstatuscheck.net.za/is essential for effective problem-solving and communication. It helps us identify issues, find solutions, and make informed decisions, whether it's in personal relationships, professional settings, or even managing projects. By incorporating SRD, we can navigate challenges more effectively and achieve positive outcomes.