Is this possible?

[FrizzleFried]

I am not sure if this is a THEME question or a MOD question.

My wordpress site has a menu bar that remains on screen all the time.  When the page loads,  there is a large logo above, etc... and the menu bar is below.  When you scroll down,  the menu bar rises up the screen to the edge of the screen then "sticks" while the rest of the page scrolls under it.

Is there any way to make the top bar of Curve2 react the same way?   Thinking on it... it wouldn't even have to scroll at all since it's already on top.  I just would like it to remain on screen while the rest of the page scrolls under it.

Is this something that can be done vis CSS or would it require a mod or...?


Thanks!

[FrizzleFried]

...all those words and I guess the best way I could have said it was ... "Any way to anchor the top menu bar"?

[TwitchisMental]

...all those words and I guess the best way I could have said it was ... "Any way to anchor the top menu bar"?

Yep pretty easy too.

Open index.css

Find Line 1105 -

Code Select Expand

#top_section {
  border-bottom: 1px solid rgb(187, 187, 187);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16);
  background: rgb(255, 255, 255);
  clear: both;
}
replace with

Code Select Expand

#top_section {
  border-bottom: 1px solid rgb(187, 187, 187);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16);
  background: rgb(255, 255, 255);
  clear: both;
  position: fixed;
  width: 100%;
}
You would want to change the top padding on the header afterwards . Line 1149

Code Select Expand

#header {
  padding: 25px 2px 12px 2px;
  display: flex;
  align-items: flex-end;
}
Preview -

You cannot view this attachment.

[FrizzleFried]

That works ALMOST perfect.  Unfortunately MENU items from below ride over the top of the bar...

You cannot view this attachment.

...as do the AVATARS from the AVATAR mod that is installed.

 You cannot view this attachment.

Any way to prevent these from happening (the avatar mod also runs on other pages and the avatars there also go over the top of the bar).

Thank you!

EDIT: ... as do the NEW buttons that show up on the message index ...

[TwitchisMental]

Put z-index: 100;

at the bottom of the #top_section.

Or just copy and paste the following

Code Select Expand

#top_section {
  border-bottom: 1px solid rgb(187, 187, 187);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16);
  background: rgb(255, 255, 255);
  clear: both;
  position: fixed;
  width: 100%;
  z-index: 100;
}

[FrizzleFried]

That worked!  Thank you sir!

[TwitchisMental]

That worked!  Thank you sir!

You're welcome, I am always happy to help.