Jump to content
Sign in to follow this  
bobbekaer

Separator in menu

Recommended Posts

bobbekaer    0
bobbekaer

Hi

 

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

post-12164-0-85629400-1371022549_thumb.p

 

How can I do this?

 

Best

Bolette

Share this post


Link to post
Share on other sites
Rob    547
Rob

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.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
bobbekaer    0
bobbekaer

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 :-)

Share this post


Link to post
Share on other sites
Rob    547
Rob

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.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
bobbekaer    0
bobbekaer

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? 

Share this post


Link to post
Share on other sites
Rob    547
Rob

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.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
bobbekaer    0
bobbekaer

Thank you Rob :-)

 

Much clearer now!

Share this post


Link to post
Share on other sites
Rob    547
Rob

Great.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×