• 0

NavBar Customization - Arrows, Colors and Border


Question

Posted · Report post

  • Latest version of DMS Pro, w/ the DMS Pro Tools plugin
  • Latest version of WordPress
  • No child theme

Website:  www.ryanleelogan.com

 

After reading way too many forum posts, I understand the forum moderators each have their own area of expertise (LESS, CSS, etc.) and offer different advice for their respective area.  For now, I'm looking for the easiest way to make these customizations.  I'll have more time hear soon to do things the "right" way.  This is my first DMS project and just trying not to give up on it.  I love(d) Pagelines Framework.

 

Question 1:  How to I remove the arrows from showing on NavBar, when there are sub pages on the menu?

 

Question 2:  How do I go about changing the color elements of the NavBar?  I've tried using Google Dev Tools.  I've tried adding syntax to DMS > Custom LESS/CSS.  I was able to follow the instructions for the Branding Section (Social Media Icons) by editing the Custom LESS/CSS, so I'm not completely a lost cause. 

 

Question 3: Is it possible to remove the border around the NavBar?  If so, how would one go about that?

 

Desired Results - Image Attached

 

Share this post


Link to post
Share on other sites

11 answers to this question

  • 0

Posted · Report post

Hi,

 

1. You will need to either create a child section of the NavBar and then edit out the claret HTML/CSS or easiest way (less professional) just use display: none on the claret class.

 

2. Again you can add your own colors by creating a child of the NavBar section. However, the simplest method is to target the correct classes and then add your CSS. If you tried adding CSS to do so and it hasn't work, you most likely didn't have the correct class in which to override.

 

For example:

 

#site .section-navbar .navbar {
background: #F00;
}
 
For styling the links, you will need to target the navbar a CSS.
 
3. You just need to override the CSS, see my image - http://d.pr/i/anGn
 
Use that class and add border: none; that should do the trick.

If you're struggling with Chromes web dev tools, I recommend you check out the Code School free interactive tutorial.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I'm new to the whole "child" concept.  If I understand correctly, using a Child Theme is professional way to go.  I have since, installed and activated Nick's Base Theme.  Is using a child theme the same as using/creating a "Child Section"?  I've never heard of that concept before and couldn't find any documentation on it.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi there, a child theme is used for all your custom css and functions. So this is a way of packaging all of your own css up in a theme which can then be downloaded onto other sites or sold on through the store etc. This keeps all your css safe from being overwritten on update or edited accidentally by clients if the site is intended for someone else etc.

 

A child section is something which was present on the Framework, in DMS everything gets installed as a plugin now. But in the Framework prior we had sections and plugins. Sections in the Framework would go into the drag and drop area, so creating a child section would be either creating your own drag and drop section from scratch or cloning an existing section adding modifications to the code and then installing that section inside your child theme. So then users who have installed your child theme and activated it get your modified section of say boxes for example instead of the standard version of boxes inside the Framework.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I finally circled back to this.  Things are going well with the Child Theme, but again, I still have no idea how to get rid of the "Claret"...in a professional manor.  Within the Firebug editor, I found out how to remove it, but transferring those findings to Custom LESS/CSS, doesn't sound appealing.  

 

Wish it was line Framework, where you could simply choose to have arrow...or not have arrows.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi there, if you've found the code for the Caret in Firebug or Chrome Dev tools you're almost there, that's the hard bit the rest is simply copy/paste the changes you've made in to the css panel from the web inspector. 

 

Once you have the class '.caret ' you can simply add the css command display:none to remove it in to your custom css.

 

.caret { display:none;}

 

http://screencast.com/t/duregmCtod7z

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Right, but Danny mentioned that as not the professional way.  So, I was just checking to see if I should do it another way...if there was another way.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Adding your code inside the child theme is considered more professional than into the custom code panel. The process would be the same though, you'd just edit your code into the style.css or style.less and save and it inside the child theme to overrule the core code.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I'm trying to edit the hover color effect of my NavBar in DMS2 and it's not working. 

 

URL: http://briandavisonline.com/ctdev/

 

I'm using: DMS2, latest Chrome, with latest version of Wordpress, with Hostgator

Active Plugins: Pagelines PRO, Pagelines Updater, BackupBuddy, DMS Professional Tools, BackWPup, and Contact Form 7

 

This is the CSS code I used: 

 

.navbar .navline > li > a:hover { color: orange;}
 
 
I'm adding this to the Custom CSS, is there somewhere else I should be using this for the navbar?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

This is a documented issue at the moment - we will let you know when resolved. 

 

Please create your own topic for issues when possible 

1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Got it Martin. Thanks...

I thought this would be a good thread since NavBar color customization was being discussed. 

Cheers!!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Yeah that's cool no problem. 

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