Element related to header or Advanced Menu Cutting of Content Below

Developer Support CMS Development
1

The Advanced Menu is cutting off the content below it - see Accountants in Clonakilty | Accountancy Firm | Xeinadin Ireland -- I think I got around this in some other templates by adding more padding, but then there is too much space. Any ideas? Thanks!

2

@omahonydonnelly,

If you like the sticky header and want to keep it then you need to add padding to the body wrapper to push it below the hieght of the header. Currently your header is set to position:fixed; which is one of the position settings that pulls it out of the natural flow of the document and places it where prompted by your css in relation to a parent element (in this case 0 from left, 0 from top, 0 from right of document body). When an element is pulled out of the natural document flow it’s spacial requirements are ignored by the other elements. This is why it is covering your content. If you want to fix this on all of your pages you can do this:

.body-container-wrapper {
 padding-top: 180px;
}

Find .body-container-wrapper in your css and change the padding-top. 180 is a bit extreme but it should be the hieght of your header plus about 40px for a little spacing.

If you don’t like the sticky header and you want the header to go back into the natural order of your document you can do this:

.header-container-wrapper {
 position:static;
}

Change the position from fixed to static and it will pop back into place, pushing the content below it down to make room.

Your header is pretty large, I can’t image in performs very well on mobile. There isn’t a clean fix for this because you have layers of margins and paddings. Here are the elements that are creating the spacing:

.header-container {
 padding: 10px 0; <-- This
 background: #fff;
 z-index: 9999;
}

.container-fluid .row-fluid .page-center {
 float: none;
 max-width: 1280px;
 margin: 20px 60px; <-- This
}

.custom-menu-primary {
 padding: 20px; <-- This (This is actually inline in your tempalate)
}

Also you have a raw html module at the bottom of your header that containers <br class=“clear”>. Hubspots containers are already set to clear so this isn’t needed and it is adding 19px to the height of your header. You should remove it.

3

Hi, I have a similar issue. My header is very large and I can’t seem to make it smaller through global modules etc. Ive not published my site yet so not sure if you will be able to see the link?

4

Hi Mari

Sadly we can’t see the link you sent as we don’t have access to your portal. If you can grab a preview link though by using the preview option when in the editor, then copying the shareable preview link, that might work and we can take a look.

All the best

David

5

Thanks Jsum, that did the trick! Sorry for the delay, I’m only getting time to look into it now.

Thanks also for the additional feedback on the code. I used the theme provided with some mods of my own, but haven’t had time to create a ‘cleaner’ one. I do worry about the speed and performance on mobile. Hopefully I’ll get some time to look into that soon!

Have a great day!

6

No problem @omahonydonnelly, glad I could help. If this problem was squared away for you please don’t forget to choose a solution.