Disable Sticky Top Navigation Bar OR Read More Tag fix in Floral Theme

stacylynnhyatt · Member · Dec 15, 2017 at 6:25 pm
Copy link

Add topic to favorites
Hello,

I need css code to get one of two things to happen on my blog site (https://stacylynnhyatt.com/soundlivingblog/) which uses the FLORAL theme. (Note: I’m a Premium user and have rights to make css adjustments.)

Despite all my searches, I just can’t make one of these things happen:

1) Disable the “sticky” top navigation bar. I want it to function and look exactly how it currently does — except I want it to move with the rest of the page when I scroll down.

OR

2) I need my “Read More” tag to be customized to land on the blog post page BELOW the sticky top nav bar. (Currently, if you click “Continue Reading” at the bottom of a post on the main blog page, the sticky nav menu covers the first first lines of text — or half inch of the image — where the “Read More” tag is placed, which is driving me crazy!)

Any help would be greatly appreciated!!

The blog I need help with is: (visible only to logged in users)
staff-frank · Staff · Dec 15, 2017 at 7:06 pm
Copy link
Hi there,

The following custom CSS disables the “sticky” top navigation bar:
```
.header-content {
    position: unset !important;
}
```
Hope that’s what you had in mind.
stacylynnhyatt · Member · Dec 15, 2017 at 10:38 pm
Copy link
staff-frank

That worked — except now it kind of ‘jolts’ a bit when I start to scroll down. Hard to explain, but if you visit the site and scroll down, you can see what I’m saying. It doesn’t move smoothly. I wonder if there is an easy way to fix that, so the header nav bar and the header logo/image all move smoothly together?

Thank you for your help!
kathrynwp · Staff · Dec 16, 2017 at 1:15 am
Copy link
My colleague Mark helped out with this tricky one.

Give this a try instead of what Thabo gave you earlier:
```
#masthead {
    margin-top: 0 !important;
}
.header-content {
    position: static !important;
}
```
Normally, we try to avoid using !important in custom CSS, but here it’s necessary, to override some inline CSS being added by the theme dynamically when scrolling.

Thabo – thanks for helping out, as always!
staff-frank · Staff · Dec 16, 2017 at 6:36 am
Copy link
No problem, Kathryn. Yes, your CSS works much better than mine. I’m bookmarking this :-)
stacylynnhyatt · Member · Dec 16, 2017 at 2:57 pm
Copy link
Oh my goodness, thank you Kathryn! That works perfectly!! :D

Much thanks to you both!
kathrynwp · Staff · Dec 17, 2017 at 1:33 am
Copy link
Glad that did the trick!

No items found.