Navbar not working with any othe php code

Report · Jun 12, 2021

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!

Report · Jun 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.

Report · Jun 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.

Report · Jun 12, 2021

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

Report · Jun 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.

Report · Jun 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 & Moderator

Report · Jun 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.

Report · Jun 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 & Moderator

Report · Jun 12, 2021

there was a tiny bit of horizontal wobble and the code made that disappear, as well as the annoying scroll bar.

Report · Jun 12, 2021

PS Could you point me in the direction of some clear instructions for setting up the testing server? I downloaded xampp, but had no idea what to do with it

Report · Jun 12, 2021

See my reply with screenshots from yesterday. However, XAMPP uses htdocs as the default web directory, not www.

https://community.adobe.com/t5/dreamweaver/dreamweaver-not-recognizing-php-code/m-p/12107719#M212042

If you need more help, start a new topic about the testing server.

Nancy O'Shea— Product User, Community Expert & Moderator

Navbar not working with any othe php code

1 Correct answer