Fixed position navbar covering elements in editor

Christopher Conley asked on March 19, 2018 18:27

Hello,

We have a navbar with a fixed position, height and width defined in a page template. This navbar is meant to stay affixed to the top of the window as the user scrolls down the page. Here is the relevant CSS:

.navbar{
height: 90px;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
z-index: 31;
}

It works great on the site!

The problem we're running into is that it's in behind parts of the Kentico interface when viewed through the "Pages" app. We can't get to the topmost webpartzones. Totally inaccessible. Before anyone says it, changing the z-index does nothing to change the behavior of the div in relation to the Kentico interface.

Any way to get Kentico to show this content in the page and design tabs?

Correct Answer

Brenden Kehren answered on March 19, 2018 19:02

Typically you need to add some override classes in your custom css. Use the .EditMode and .DesignMode along with your .navbar to get the overrides you need.

Something like:

.EditMode .navbar, .DesignMode .navbar { position: relative; }

Or just hide it.

1 votesVote for this answer Unmark Correct answer

Recent Answers

Christopher Conley answered on March 19, 2018 19:25 (last edited on March 19, 2018 19:41)

Hi Brenden,

Thank you for your quick reply! I have tried adding the two override classes you suggested and neither appear to have any effect regardless of view mode. These classes apply to Kentico 10? Is there a reference document somewhere?

0 votesVote for this answer Mark as a Correct answer

Brenden Kehren answered on March 19, 2018 19:45

Have you made sure it comes AFTER the Kentico UI CSS? View the source of the page(s) being rendered in the UI. Maybe use the hack and add the !important statement in your css.

There is not a reference that I'm aware of.

0 votesVote for this answer Mark as a Correct answer

Christopher Conley answered on March 19, 2018 20:11

Hi Brenden,

Everything appears to be in order but I'm still not getting a result

On a hunch I just checked something: looking at the page's source while in the design tab, I'm not seeing the DesignMode or EditMode classes applied to any of the divs on the page. I checked this by right clicking on the page while on the design tab, viewing the source and then doing a CTRL-F and searching for the classes there.

0 votesVote for this answer Mark as a Correct answer

Brenden Kehren answered on March 19, 2018 20:13

They would be nested classes in the iframes.

0 votesVote for this answer Mark as a Correct answer

Christopher Conley answered on March 19, 2018 20:25

That was the correct answer.

Turns out my browser was using a cached version of the CSS. I'm super embarrassed.

Thank you Brenden. I would have never found out about those classes on my own!

2 votesVote for this answer Mark as a Correct answer