Navbar and footer issues

Support
#1

Hi there. I am currently developing the following site: www.sarahartland.com (bypass under construction with password sarahartland).

I’m having a few issues.

Navbar:

  1. I want it to overlay the bottom of the above-masthead slider. I can achieve this, but it’s not responsive. Is there any way to make it responsive?
  2. The background color of the navbar should be a dark green. It shows up perfectly in cornerstone, but doesn’t show up on the live site. How can I fix this?
  3. There is a very thin white line beneath the navbar. How can I remove this?
    How can I make the header fixed to the top of the page when scrolling? I have set it to fixed in the theme customise settings, but it’s being ignored.

Footer:

  1. How can I remove the thin white line between the top and bottom footer areas?
  2. Is there a way to add container boxes around the footer widgets? Happy to style them myself, just can’t get any code to show up in there.

Thanks in advance for your help!

#2

Hi @Loutopia,

Please do update X theme too since you update cornerstone to avoid incompatibility issues.

Can you give us more detailed about this? I don’t see any issue right now.

How did you make it green? It is white by default and then on Theme Options > Integrity you can set it to transparent.

To make it green, we can add this custom CSS on Theme Options > Global CSS

.x-navbar {
    background-color: green;
    box-shadow: none;
    border-bottom: none;
}

This is default bottom border. We can remove it using CSS and I have included it aboce.

footer.x-colophon.top {
    border-top: none;
    box-shadow: none;
}

See this: https://screencast-o-matic.com/watch/cYeIQRxukh

Yes, you can inspect the element and necessary border to look like box in widget. See the following guide:

Note, this is just to show you how it’s done. Further customization is outside the scope of our support. Thank you for understanding.

Hope this helps.

#3

Thank you for your reply.

Navbar color
I made the navbar green in the css just as you did, but just to check that I hadn’t done anything wrong, I copied and pasted the code you supplied. The ‘green’ you specified now shows up in the theme styling previewer, but won’t show up on the live site. The navbar on the live site is now default white - the css code doesn’t look like it’s actually working at all. I’ve removed transparency for now, until I can get the color sorted. The actual hex code for the color I am trying to achieve is #1e383d.

Default bottom border
Your code for the navbar worked - thanks so much! It didn’t work for the footer. This is my current footer code:

footer.x-colophon.top {
background: #4c7179;
padding-top: 40px;
padding-bottom: 20px;
}
footer.x-colophon.bottom {
background: #1e383d;
padding-top: 20px;
padding-bottom: 10px;
}

Hope that helps? I tried the border-bottom on both of these and even a border-top on colophon bottom but neither worked. I watched the screencast which is very helpful, thanks - but it won’t let me edit it the way you did or retain the things I’ve changed, and the css showing in the inspect element window doesn’t show up in the css for the theme.

#4

Hey @Loutopia,

It sounds like you’re having the cache issue, I checked your site and I see the content of your site is being served by the cache (Endurance Cache) please clear all caches including your browser’s cache and deactivate your cache plugins and optimization services.

you can turn off your endurance cache in Admin > Settings > General. Caching plugins are best to turn on only when you’ve finished building the site.

Please note that you can customize the X header’s basic settings via X > Theme Options > Header and similarly you can customize the footer’s basic settings via X > Theme Options > Footer however X header or footer is not designed for in-depth changes as we often receive header or footer related customization questions or requests and this was the reason why a header and footer builder was created and an advanced X version was formed now called Pro . If you need in-depth changes, please consider using Pro’s header and footer builders so you can build a custom header or footer yourself without custom coding. In case you get stuck with the options, we’re here to assist all the way. Please see https://theme.co/docs/header-footer-overview

Hope this helps!

#5

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