Jump to content

Archived

This topic is now archived and is closed to further replies.

Ryan Logan

NavBar Customization - Arrows, Colors and Border

Recommended Posts

Ryan Logan+    0
Ryan Logan
  • 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
Danny    1,327
Danny

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.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Ryan Logan+    0
Ryan Logan

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
James B    436
James B

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.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
Ryan Logan+    0
Ryan Logan

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
James B    436
James B

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


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
Ryan Logan+    0
Ryan Logan

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
James B    436
James B

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.


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
jessedwilloughby    2
jessedwilloughby

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?

Cheers!

Jesse Willoughby

http://www.localrave.com

Share this post


Link to post
Share on other sites
greenfly    230
greenfly

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

 

Please create your own topic for issues when possible 

  • Like 1

The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
jessedwilloughby    2
jessedwilloughby

Got it Martin. Thanks...

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

Cheers!!


Cheers!

Jesse Willoughby

http://www.localrave.com

Share this post


Link to post
Share on other sites
greenfly    230
greenfly

Yeah that's cool no problem. 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites

  • Similar Content

    • Grant Turck
      By Grant Turck+
      Navbar Broken on All Devices When Not Logged Into Wordpress. See screenshots attached from mobile. What is causing this issue and how do I fix? Site is venicepride [dot] org.


    • PierreFF
      By PierreFF+
      Hello, 
      I have an issue with NavPro on mobile when the link of the menue is on the same page. 
      Here is my website: http://foundersofthefuture.co
      The isssue comes from the fact that in my menue most of the items send somewhere else on the same page using anchor link (eg. #container_u788888). 
      This works well on desktop but on mobile, nothing happens when clicking on the link. One of the link of the menue of the homepage "France" sends to another page of the website and this one works well even on mobile. 
      I am using the Pagelines framework theme and also used a wordpress plugin (jQuery Smooth Scroll) for smooth scrolling . 
      Thanks in advance for your help and let me know if I need to provide more information. 
      Best,
      Pierre
    • tristanrodgers
      By tristanrodgers+
      Hi there!
      I'd love to have some social media buttons in my navbar like my online-shop has!
      http://mc1r-magazine.com/
      Can someone explain me how to create them? I tried a lot but don't know how to realize them...
      Greetings from Germany,
      Tristan
    • jeomiland
      By jeomiland+
      Hi guys. Just now trying out Platform 5. I like the reletive simplcity of the new interface but there are things I'm used to in DMS that I'm not seeing yet in 5. Is there a good manual, documentation, video series about some of the basics?
      In particular, I've got a simple navigation menu, created the standard way in WP menus section with several top level parents, then 3-4 children menu items below a couple parent items. Have them moved to the right to create the standard parent-child relationship but all I see on the page is the parent level items - no dropdown!. So I changed themes from Platform5 to the standard 2015 default theme and now I see absolutely no menu at top, except for the mobile (hamburger?) icon.
      In DMS, one had Navi and Navbar, etc sections and each would work differently and give different results. How do you work the menu system in 5? And how get different results ?
      thanks
    • nizami
      By nizami+
      I have a problem at http://kambo.world. Using navbar for the main site navigation. It works fine in normal/desktop mode [first screenshot], using the WP Menu I have specified. But in hamburger mode it seems to do its own thing, picking a few pages at random [second screenshot] A fix for this greatly appreciated! 
       


×