0

I am currently building a page in SP13 enviroment and what I want to do is to create a horizontal Navigation Panel on the page Header + menu on the left with sub-categories. I created 2 Webparts with CE:

  1. Horizontal Navigation - as a Header
  2. left menu - on top left of the page

Then I uploaded CSS menu templates to site assets and connected them to Content Editors.

When I connect it to 1 CE, all good - nice formatting as expected, all works fine, but when 2 of them are connected, css mixes up styles and all breaks.

Why does it happen and how can I fix it?

3

All content editors are rendered as part of single HTML document. CSS styles don't have scope, they affect entire page. It's a common practice to use content editors to hide SharePoint UI elements (like ribbon buttons) that are not part of the web part.

You can create single root elements per each CE and assign ID value:

<div id="navigation-div">
    <p>Red</p>
</div>
<div id="menu-div">
    <p>Blue</p>
</div>

And then limit the scope of your CSS rules using ID:

#navigation-div p
{
    color: red;
}
#menu-div p
{
    color: blue;
}
3
  • many thanks! and can you please explain in more details how I implement the codes you suggest above? ( I am not pretty advanced with it). Where exactly shall I attach the codes and do I Need to Change smth in These css-templates index files?
    – intern
    Apr 14 '16 at 6:55
  • there is such a part in html index file: <div id='cssmenu'> <ul> ... which means that CE already have assigned IDs. am i right? and in both my templates, they are called "cssmenu", that`s the reason why all mixes up. In order to fix it, I need to assign unique ID to one CE and then custome CSS file?
    – intern
    Apr 14 '16 at 9:25
  • Yes, you need to change ID attribute in one of content editors and update your CSS rules. ID attribute should be unique in entire document as described in this MDN article Apr 14 '16 at 10:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.