Skip to main content
W
Weat01
Inspiring
June 12, 2021
Answered

Navbar not working with any othe php code

  • June 12, 2021
  • 3 replies
  • 916 views

Hi,

I have a jumbotron which is too big (height) on a mobile display - how might I set a class to reduce the size of it? It also has white space above the image, which I wondered how to get rid of, so that the image abuts onto the navbar? https://www.quodvultdeus.com 

I am also a bit confused why when I click to select the jumbotron on my template, dw lists two 'jumbotron' items (one with background of blue), and one of 'jumbotron-fluid'.

Thanks in advance!

    This topic has been closed for replies.
    Correct answer Ben M

    For the whitespace, your body tag has top padding of 70 while your nav height is only 56px which is leading to that space gap. The padding should be equal to the height of the navbar in this instance.

     

    For your question about jumbotron and jumbotron-fluid classes showing up this is the default way to code a jumbotron in bootstrap.  https://getbootstrap.com/docs/4.1/components/jumbotron/ .  Also to why one of the backgrounds is blue, that would likely have been something done from the user end as that is not the default to my knowledge.

     

    As to reducing the height on mobile, there are a lot of classes adding to the height of the jumbotron that are adding padding and margin to the top bottom of elements (div, h1, etc.). If you start modifying those attributes it should allow you to reduce the height on mobile.

    3 replies

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    June 12, 2021

    What osgood_ and BenM said, remove padding from the <body> tag.

     

    Also please explain what this is used for?  If you don't know then chances are you don't need it. 

     

      <div id="overflowhidden">                       </div>

     

    I suspect it's an orphan from the Bootstrap 3 site.  Overflow hidden is not something we typically use with Bootstrap 4 layouts because columns are created with Flexbox now, not Floats.

     

    Nancy O'Shea— Product User & Community Expert
    W
    Weat01Author
    Inspiring
    June 12, 2021

    Hi Nancy, i used the overflow hidden to remove the horizontal scroll bar on the mobile display, as it was very heavy and obstructed the content. I'll try the padding.

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    June 12, 2021

    I'm afraid I don't understand.  When content throws scrollbars, it's usually necessary for usability. 

     

    Nancy O'Shea— Product User & Community Expert
    B
    Community Expert
    Ben MCommunity ExpertCorrect answer
    Community Expert
    June 12, 2021

    For the whitespace, your body tag has top padding of 70 while your nav height is only 56px which is leading to that space gap. The padding should be equal to the height of the navbar in this instance.

     

    For your question about jumbotron and jumbotron-fluid classes showing up this is the default way to code a jumbotron in bootstrap.  https://getbootstrap.com/docs/4.1/components/jumbotron/ .  Also to why one of the backgrounds is blue, that would likely have been something done from the user end as that is not the default to my knowledge.

     

    As to reducing the height on mobile, there are a lot of classes adding to the height of the jumbotron that are adding padding and margin to the top bottom of elements (div, h1, etc.). If you start modifying those attributes it should allow you to reduce the height on mobile.

      W
      Weat01Author
      Inspiring
      June 12, 2021

      Brilliant, thanks so much. How does one measure things like 56px?

      O
      osgood_
      Legend
      June 12, 2021

      Thats a hugely poor approach as the depth of the navbar can change depending on a users browser set up and what they do whilst viewing. If a user zooms out for any reason or has their browser set differently than yours you still have white space. The image should butt up to the top of the browser window and there should be ample room in the image to allow flexibility if a user zooms in or out, a concrete solution not a sticking plaster approach.

      O
      osgood_
      Legend
      June 12, 2021

      The reason why you have a space between the navbar and your jumbotron is the padding on your <body> tag:

       

      <body style="padding-top: 70px;">

       

      Reduce the padding. Personally I would set the padding on the jumotron itself NOT the body tag but you would realistically need a bit more sky in the image to offset the lose of the top of the image, which will sit under the fixed navbar. This way the jumbotron sits flush with the top of the browser window. As you have the padding at the moment the jumbotron is being pushed down 70px to clear the navbar, leaving white space so its a bit of a hit and miss approach.

       

      I dont see the other (height) issue with the jumbotron.

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices