Jump to content

Archived

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

stoltz

Adding a bootstrap button to navbar or changing color

Recommended Posts

stoltz

Is it possible to add a bootstrap button to Navbar?

 

I am using DMS 2 and Navbar (black theme). The effect I want to achieve is bootstrap button with a different color (for a login etc) at the end of the row. This will make the login feature more noticeable. 

 

Can I achieve this by using custom CSS and the custom classes CSS box available for each menu item in WP menus?

 

If so - How do I do this?

 

The second alternative is to change the color of one menu item in Navbar. Is this possible and if so, how?

Share this post


Link to post
Share on other sites
Danny

Hi,

 

This is actually quite easy, simply follow the steps below.

 

1. Go to WordPress Admin Dashboard > Appearance > Menus.

2. Click on Screen Options (top right hand corner)

3. Check the option CSS Classes and a new CSS Classes (optional) input field will appear below your Navigation label field.

4. In that field add the following:

 

btn btn-default btn-primary

 

You can replace btn-primary with the following to get different colors:

 

btn-primary (Dark Blue)
btn-info (Light Blue)
btn-success (Green)
btn-warning (Orange)
btn-important (Red)
btn-inverse (Black)

 

4. Save your menu and then assign this menu to your navigation section such as NavBar or Navi.

5. You will find that the button is larger than your other menu items and very likely the buttons background color is touching the top and bottom of your navigation area. To resolve this you're going to need to use some custom CSS, add the following and this should resolve the issue with line-height:

 

#site .btn.menu-item > a {
  padding: 5px;
  font-size: 12px;
  color: white;
  line-height: 23px;
  text-transform: capitalize;
  opacity: 1;
}

 

The finished styling will look something similar to this - https://cloudup.com/coEARiTkQbh


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
stoltz

Great - That worked!

 

Out of curiosity, is it possible to add [pl-button] to individual navbar elements using the custom CSS the same way?

Share this post


Link to post
Share on other sites
Danny

To be honest, I have never tried. However, I don't believe you can include a shortcode into your menu items.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
knasen81

Hi,

 

This is actually quite easy, simply follow the steps below.

 

1. Go to WordPress Admin Dashboard > Appearance > Menus.

2. Click on Screen Options (top right hand corner)

3. Check the option CSS Classes and a new CSS Classes (optional) input field will appear below your Navigation label field.

4. In that field add the following:

 

btn btn-default btn-primary

 

You can replace btn-primary with the following to get different colors:

 

btn-primary (Dark Blue)
btn-info (Light Blue)
btn-success (Green)
btn-warning (Orange)
btn-important (Red)
btn-inverse (Black)

 

4. Save your menu and then assign this menu to your navigation section such as NavBar or Navi.

5. You will find that the button is larger than your other menu items and very likely the buttons background color is touching the top and bottom of your navigation area. To resolve this you're going to need to use some custom CSS, add the following and this should resolve the issue with line-height:

 

#site .btn.menu-item > a {
  padding: 5px;
  font-size: 12px;
  color: white;
  line-height: 23px;
  text-transform: capitalize;
  opacity: 1;
}

 

The finished styling will look something similar to this - https://cloudup.com/coEARiTkQbh

Where do you put this code under 5?

Where do you put this code under 5?

I solve it now ;-) Sorry for asking to fast!

Share this post


Link to post
Share on other sites
Danny

Thanks for informing us the issue has been resolved.


Please search our forums, before posting!

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
    • Lisa Haran
      By Lisa Haran+
      Hi 
      I have a map here http://www.iloveoffset.com/maps/
      I want to add several pointer locations to the map, but when I do they do not appear.
      On this map there are 2 pointer locations and as you can there is only one visible.
      Earlier today I added 7 and could only see 4 so there is something odd going on.
      My theme is up to date
×