Navigation Overlapping Content

Hi @sarahcollett,

Thank for contacting us,

Can you send me URL of your website for menu Overlapping issue?

and using this plugin you can create a sticky menu: https://www.ads-software.com/plugins/mystickymenu/

Thanks

Hello,

My site is currently only a staging site here: https://5wx.a2b.myftpupload.com

Essentially the first content on the page is covered by the navigation bar. Is there some code to use so that all page content starts below the navigation bar?

Thanks

Is there also a way to decrease the height of the navigation bar?

Hi @sarahcollett,

For this you can paste the following css code in custom css field (Theme Dashboard >> appearance >> customize >> header setting >> custom css filed)

.navbar-brand { padding: 15px 15px 15px 0px !important; }
.navbar-wrapper { position: relative !important; }

Any confusion lets me know.

Thanks

Thank you that has really helped! Is there a way to also make the navigation sticky so that as I scroll I can still see it without using a plugin but rather adding custom CSS?

for creating a sticky menu, first of all, remove below css code in custom css filed

.navbar-wrapper { position: relative !important; }

then paste the following css code in custom css filed

.blog-detail-section
{
margin-top: 100px !important;
}

.navbar-wrapper {
    position: fixed !important;
}

use of above code then check your website.

Thanks

Thank you,

I have one more question about the layout of the pages.

I have selected full page template, however there is white space around the content, which is contained in a light blue box. How do I get the content to spread the full width of the screen?

Thank you

Hi @sarahcollett,

please share a screenshot of the issue you are facing, so that we can help you better regarding that.

Thanks

Thank you for your quick reply. The image is here

Hi @sarahcollett,

For this paste the following css code in custom css field

.blog-post-title {
   padding: 40px 0px 0px !important;
}

Thanks

• This reply was modified 7 years ago by Imran Ali.
• This reply was modified 7 years ago by Imran Ali.

Hi Imran,

I have pasted that in but nothing changed? The light blue container is still visible

Thanks

Hi @sarahcollett,

Kindly confirm look like this: https://prntscr.com/iov387

Thanks

On my PC on both firefox and chrome it looks like this still

Hi @sarahcollett

Please clear cache then paste the following css code in custom css filed

.blog-post-title {
    padding: 40px 0px 0px !important;
}

Thanks

Thank you that has worked you are great!

I have set the display for the .page-mycarousel to none but this has also removed the breadcrumb feature. Is it possible to have breadcrumb nav when the .page-mycarousel is not showing?

I would like to feature breadcrumb nav on the child pages of https://5wx.a2b.myftpupload.com/horses/

i.e. https://5wx.a2b.myftpupload.com/horses/cloud-atlas/