Jump to content
Adrianna Lima

Need to customise individual Nav Bar

Recommended Posts

Adrianna Lima+    0
Adrianna Lima

Hi,

 

             I have 2 Navbars.1 navbar is assigned to menu 1, the other assigned to menu 2. I need to customised each navbar using css. But it seems that both are sharing same class. How do i go about it?

 

.navbar .navline

.navbar .navline > li > a 

 

regards

Share this post


Link to post
Share on other sites
Ol' Blue Eyes    0
Ol' Blue Eyes

Hi,

I think this will help.  If you hover over the top of the individual nav bars you'll see a grey bar appear.  At the right end of the grey bar is a pencil icon.  When you click the pencil you'll see the editing screen at the bottom of the page.  You can add an individual class for each menu there.

Share this post


Link to post
Share on other sites
Adrianna Lima+    0
Adrianna Lima
thx but u just answered the basic of using dms.

I need to change ul li css of the nav bar cause i need 2 different nav bar.

Batman?

Share this post


Link to post
Share on other sites
Ol' Blue Eyes    0
Ol' Blue Eyes

If you add a separate class to each nav bar you can target the li css that way.  For example .navbar .one .navline > li > a, .navbar .two .navline >li >a 

Share this post


Link to post
Share on other sites
Adrianna Lima+    0
Adrianna Lima
Hi thx,

How do i add a separate class or assign navbar .one to navbar 1 and navbar .two to navbar 2?

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Click on the Edit icon for each NavBar section and in each Standard Options Styling Classes, add a unique class for each NavBar. For example,

 

my-navbar-1

my-navbar-2

 

Then you can use these classes to style each NavBar differently.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Adrianna Lima+    0
Adrianna Lima

Hi,

 

   Thanks. But i am not sure how to go about it?

 

This is my css i added in custom code 

.navbar .navline {
    
    
    left: 0px;
    display: block;
    margin: 0px 20px 0px 0px;
    font-size: 0.9em;
    float: left;
    position: relative;
    text-align: left;
    margin: auto;
}
.navbar .navline > li {
    display: block;
    float:left;
}
.navbar .navline > li > a {
    color: #555;
    border-bottom: 3px solid #fff;
    text-shadow: 0 0px 0 rgba(0,0,0,0);
}
.navbar .navline li a:hover {
    background: #eee;
    border-bottom: 3px solid #dc3e29;
    color: #000;
}

So now i added 'nav1' in the first navbar Standard Options Styling Classes and the 2nd 'nav2' in the 2nd navbar Standard Options Styling Classes.

 

So now the question is how do i use?

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Hi,

 

What you would do is, add the class you added to the beginning to your custom CSS. For example, lets say you want to give the NavBar using the nav1 a red background and the NavBar using the nav2 class a green background. You would use the following:

.nav1 .navbar {
background-color: red;
border-top: none;
}

.nav2 .navbar {
background-color: green;
border-top: none;
}

The you just do the same thing for all your other CSS.

  • Like 1

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Adrianna Lima+    0
Adrianna Lima

You save my day Ninja !. Thanks!!

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

No problem, I am currently in the middle of a CSS/LESS Cheatsheet which will be include a number of predetermined classes which users can add to the styling classes field.

These will include zero margin, zero padding etc... but I will also include custom NavBar classes too, so thanks! :D

  • Like 2

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Adrianna Lima+    0
Adrianna Lima

Hi,

 

   Cool bro!

 

  While we are at navbar topic, How do i edit the css for the drop down menu. The border of the dropdown menu 'box' has a radius and there is an small triangle(pointy thingy). I want to make the drop down menu appear as a normal box. I cant seem to find the css.

 

 Great appreciate if you cud show me the way.

 

[attachment=1264:Screen Shot 2013-08-05 at 5.41.27 PM.png]

 

 

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Inspect your navbar until you find a class called caret, this is where the triangular shape is coming from.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Adrianna Lima+    0
Adrianna Lima

Hi,

 

   I manage to find caret but it is not wat i was looking for :

 

.caret {

    display: inline-block;
    width: 0px;
    height: 0px;
    vertical-align: top;
    border-top: 4px solid rgba(0, 0, 0, 0.3);
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    content: "";
}
 
     Im refering to the triangle that is pointing upward when u hover on the menu with submenu.
 
    Any idea where to look for it?

Share this post


Link to post
Share on other sites
Rob    547
Rob

You actually found the correct CSS. The caret is the drop-down pointing arrow. 

 

Add to the CSS you found above:

 

display: none;

 

That will make it go away.


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


  • 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! 
       


×