Topic: Section title is hidden behind fixed navbar

leopoldus11 pro asked 7 years ago


Hi there, I noticed something I don't like when I create a single page website using sections in my fixed navbar. When I click on a nav item and the page automatically scrolls down to that specific section, the position of my fixed navbar sits above my section title and therefore hides it, although I would like the title to be seen. Obviously, this doesn't happen when my navbar is not fixed. Is there a quick fix to that? Would kindly appreciate any help. Thx in advance.

jbankster.web pro answered 7 years ago


Hi Bartłomiej, Thanks for solution, much appreciated. But is this a temporary band-aid? Will adding such an attribute scale when you will almost always have to adjust this value at given viewport media breakpoints. Not sure how I would adjust a data-offset="" attribute at custom media breakpoint/viewport widths???? This is the fist time I've ever needed to use this attribute in Bootstrap just so that I can get my anchored headings to not be hidden. I usually resorted to placing a small amount of TOP margin/padding on the body element that was as high as the navbar for the given breakpoint to over come content being hidden. <<< That was the suggested workaround by Bootstap, and it worked for me all the time. Trying to do the same thing with MDB templates and those TOP padding/margin values are completely ignored, which is very weird and can't figure out how resolve this. Can you explain why this problem happens in some MDB templates and not others? The templates where anchored headings ARE WORKING, don't use the (data-offset="") attribute. <<< Remember, this offset (depending on how extensive your menu is) will need to have custom css media breakpoint code added for various viewport sizes. Using a data-offset="" attribute seems very impractical... unless I'm completely missing something. Maybe a different ticket, but the MDB 4.3.0 basic-landing-page starter template's navigation doesn't respond at all now. <<< So this is broken. In the new download, if I goto, "MDB-PRO > templates > starters > basic-landing-page.html" template in the latest 4.3.0 release. <<< They're missing the: <a href="#id_name" .... ></a> Once the above is added, navigating scrolls now, but with the same problem... linked section headings a sitting underneath the navbar. IFFFFFF you NOW add the (data-offset="100") attribute, save and refresh cache, you will find the link in the navbar doesn't respond now or scroll to it's intended anchor id. <<< Something BUGGY is going on here. Josh

Hi, @leopoldus11! Since MDB 4.3.0 you can add data-offset attribute to your link. Here's an example: <a href="#mySectionId" data-offset="100">Smooth Scroll Example</a> Of course, you can set value of data-offset to number of pixels you like

jbankster.web pro answered 7 years ago


Hi Leo, My apologies. IMO is short for "in my opinion". Here's a little trick. In Google, you can find any acronym by simply typing in the nane "acronym:" and then suppling the actual acronym after the colon in your Google search/url bar. Example: acronym:imo or acronym:afaik No problem Leo. Support staff want to help, and people in the community, like myself, will try and help you as well. I have years of experience and will try and help if I have the time. MDB is new to me, HTML and CSS isn't. Realistically, to help anyone, we have to have code to look at. Trying to answer your original question is nearly impossible to help without having a page to look at, as we read through the description of your problem. Usually you provide a snippet of code "html/css" and paste it into your forum posting along with your description, or provide a url/link we can visit in our browsers. The reason we ask for links is because we can inspect a live webpage with html and css inspection tools. Google Chrome has builtin inspection tools that allow anyone with just a little html css experience the ability to troubleshoot problems and come up with solutions in a time efficient manner. Even if you paste a good code snippet into the forum post... having a live link to look at is still much better to have if possible. Leo, MDB and almost any other template maker, is going to have live links to their demo templates on their website. Some are paid template and some are free. But they almost always have live previews of these templates for the public to pull up in their browsers. Example... You mentioned Portfolio demo template. Here's a link to all the portfolio templates on MDB's site. Which one are you referring to? https://mdbootstrap.com/product/portfolio-theme/#live-preview Josh

leopoldus11 pro answered 7 years ago


Hi Josh, thanks for the advice to look for Example Pro Template. In this template, the scrolling appears to be "coded correctly". Although I still don't know why (I started coding 1.5 months ago). What's the meaning of IMO? Couldn't find the term online. I used an incomplete Portfolio template that came with the MDB PRO 4.2.0 UI Kit that I bought. I'm not sure there is a link to this template but I will give my best from now on to provide links for better clarification. Thx again. Best Leo

jbankster.web pro answered 7 years ago


Hi leopoldus11, It's almost impossible to help when you don't provide a link to a live site or link to a demo template on MDB's site that you chose to use. I ran into the same problem with one of the templates we were testing with. It was the Freebee, Baaic Landing Page template. Not all templates have the same problem though. Example Freebee Template: https://mdbootstrap.com/download/templates/bootstrap/free/basic-landing-page/index.html Click on the "About" link... The "About Us" heading appears hidden under the navbar. Does the template show the same problem your talking about leopoldus11? Example Pro Template: https://mdbootstrap.com/live/_MDB/templates/Landing-Page/restaurant-landing-page.html When clicking the links on this landing page, the main headings show as expected. This isn't buggy code in MDB, just coded incorrectly (IMO) in the layout and styling. Not sure why we would would need to wait for a new release of MDB for this to be fixed. The first template in the example link above is simply coded wrong for the anchor links and styling used. This should be a simple trivial fix imo. Josh

Marta Wierzbicka staff answered 7 years ago


Hello, we know this issu and now we're working on new version of MDB where this problem is fixed. Best, Marta

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags