Increased navbar height crowds out section below

Support
#1

Hello - trying to understand the relationship between the Navbar and the content container. I have the Navbar set at 145px to increase ‘white’ space. It is now covering or crowding out the image in the first main content area. I added CSS to push the image down, but that only works in Liveview, but not the actual site. But if the Navbar and Contain are two separate DIV’s what am I missing.

http://consolgrp.com

Thanks, Sonny

#2

I will delete the section and try a newer non classic with adjustments for padding, but my goal was to create a prominent above-the-fold, somewhat ‘hero’ image of the balance of Justice and when I increased the Navbar size to allow for more white space, it covers the top of that image so it cannot be seen. It called for an image of a certain size which I created, but it keeps covering it up.

#3

Hi There @Sunbonex

Thanks for writing in! I have checked your site and I see the image is appearing properly below your header (see screenshot: https://snag.gy/DzabJQ.jpg).

You can further adjust it by setting a minimum height to your section.

Also you can adjust your background image positioning. Please refer to this resource for possible values (https://www.w3schools.com/cssref/pr_background-position.asp).

Hope that helps.

#4

I’ve started a new page using the non classic sections but I’m confused. Why does the background image for the section not expand or cause the container to open to that height. I tried using a min-height but it created a varying gap at the bottom between the next section if the viewport shrinks and worse on a mobile device.

#5

Hi @Sunbonex,

From what I understand you want the header and first section to occupy the above-the-fold regardless of the screen-size, yes?

Please add this to your section’s Inline CSS

min-height: calc(100vh - 125px);

100vh is the height of the screen/window, the minus 125px is the height of the header.

Hope it helps,
Cheers!

#6

I’m using the classic section and it does not have inline css available…can I do it from the content css and what would the selector or div id be?

#7

If you look at the site, please and thank you, I’m using a Classic Section and the top of the image is set as the section background is forced up into the navbar where it cannot be seen. I’ve tried to change every setting but with the parallax on, it forces the image up.

#8

Hi @Sunbonex,

The inline CSS is first implemented in classic section, the difference is the classic section doesn’t have Customize area. Please inspect your classic section and scroll it down and there will be ID, Class, and Inline CSS fields.

Thanks!

#9

Thanks for your response, but I don’t know what settings to use to push the image down…I’ve tried cover, contain, % and nothing makes the background image appear correctly. Please advise, thank you kindly!

#10

Hi @Sunbonex,

I recommend using v2 section for that, the classic has no background/parallax options like this

You can change the size and its direction, and it’s also calculated by javascript so it’s dependn on the size of your parallax image.

Thanks!

#11

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.