Jump to content


Photo
- - - - -

Separator in menu


Best Answer Rob , 12 June 2013 - 01:32 PM

Hi Bolette,

 

If you go to Dashboard > Appearance > Menus, click "Screen Options" at the top right.  A panel will descend.  You'll see a check box for "CSS Classes".   Please check it, then click "Screen Options" again to close the panel.  The settings are saved automatically.

 

Now, in all your menu items, a new field will display, whether adding new items or editing existing items.  It is the CSS Class field.  Let's create a new class and call it mybarright.  Add that to all parent level menu items except the last one.  Do not add it to child level items. That's very important.

 

You'll then need to add a new snippet of CSS.  Since you've not done this before, I'm going to give you a sample, but you can adjust it as desired. Place this in Dashboard > PageLines > Site Options > Custom Code on its own line under body {}.

 
.mybarright {border-right: 1px solid white;}

Let us know how that experiment goes.

Go to the full post


  • Please log in to reply
8 replies to this topic

#1 bobbekaer

bobbekaer

    Advanced Member

  • Members

  • 89 posts
  • Framework Version:2.3.6
  • Country: Country Flag

Posted 12 June 2013 - 07:44 AM

Hi

 

I would like to insert separators between the menu-items.

Please Login or Register to see this Hidden Content

 

Please Login or Register to see this Hidden Content

  6.24KB   0 downloads

 

How can I do this?

 

Best

Bolette



#2 bobbekaer

bobbekaer

    Advanced Member

  • Members

  • 89 posts
  • Framework Version:2.3.6
  • Country: Country Flag

Posted 12 June 2013 - 08:33 AM

Ups I forgot the link to the site:

Please Login or Register to see this Hidden Content

:-)



#3 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 12 June 2013 - 01:32 PM   Best Answer

Hi Bolette,

 

If you go to Dashboard > Appearance > Menus, click "Screen Options" at the top right.  A panel will descend.  You'll see a check box for "CSS Classes".   Please check it, then click "Screen Options" again to close the panel.  The settings are saved automatically.

 

Now, in all your menu items, a new field will display, whether adding new items or editing existing items.  It is the CSS Class field.  Let's create a new class and call it mybarright.  Add that to all parent level menu items except the last one.  Do not add it to child level items. That's very important.

 

You'll then need to add a new snippet of CSS.  Since you've not done this before, I'm going to give you a sample, but you can adjust it as desired. Place this in Dashboard > PageLines > Site Options > Custom Code on its own line under body {}.

Please Login or Register to see this Hidden Content

Let us know how that experiment goes.



#4 bobbekaer

bobbekaer

    Advanced Member

  • Members

  • 89 posts
  • Framework Version:2.3.6
  • Country: Country Flag

Posted 12 June 2013 - 05:39 PM

Thank you Rob :-)

 

I put the CSS snippet in my child theme and added it in the CSS class field - works perfect. I never used this function on the menus, happy to learn new stuff! Now I will play with the styling....

 

Once again, thank you :-)



#5 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 12 June 2013 - 06:25 PM

Hi I'd recommend moving the CSS to Custom Code as child themes are sometimes upgraded by developers.  Custom Code or Customize Plugin are the two safest ways to protect your customizations from being overwritten.



#6 bobbekaer

bobbekaer

    Advanced Member

  • Members

  • 89 posts
  • Framework Version:2.3.6
  • Country: Country Flag

Posted 13 June 2013 - 06:31 AM

Ok, I keep adding to the Base Theme and thought that was better than using the Custom Code? 

 

Is there any rules for what to add to Custom Code and what to put in the Base Theme? 



#7 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 13 June 2013 - 09:10 PM

Hi Bolette

 

A basic rule of thumb is... if the change is to be used throughout the site, no matter what child theme will be used, then use Custom Code.

 

Another rule is... if the child theme is a third-party product from our store (free or premium), remember that the developer may update it, and custom codes can be lost in child theme files.

 

The two best solutions are Custom Code or the PageLines Customize plugin. Personally, I prefer Custom Code for CSS and use PageLines Customize for functions and hooks.



#8 bobbekaer

bobbekaer

    Advanced Member

  • Members

  • 89 posts
  • Framework Version:2.3.6
  • Country: Country Flag

Posted 14 June 2013 - 05:08 AM

Thank you Rob :-)

 

Much clearer now!



#9 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 14 June 2013 - 09:36 AM

Great.