Jump to content

Archived

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

Ryan Logan

Add Button To Navi

Recommended Posts

Ryan Logan

Hello.  I was able to do this with Framework, shown here.  I haven't with Framework for quite some time, so I can't remember how I accomplished this before.  I have some Custom CSS, but I think I had to add something to Appearance --> Editor for the hook.

 

I'd like to do this with DMS and the DMS Child Theme.  Here is my current result in DMS.  Here is my desired result.

 

Thank you.

Share this post


Link to post
Share on other sites
Danny

Hi,

 

To add a button to a Nav section, you're going to need to use a hook, to make this simple you would be best using the Hooker plugin. 


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Guest

I have the Hooker plugin installed and I have the button appearing underneath the Navi, using the pagelines_inside_bottom_navi, as shown in my previous post. Custom CSS shown below.  I've tried other hooks, but I'm not sure how to get the button on the same line as the Navi, next to the Search icon.

 

#site .btn-small {
  font-family: Calibri;
  font-size: 14px;
  margin-left: 69%;
}

Share this post


Link to post
Share on other sites
Danny

You're going to need to use custom CSS for your button to reposition it. A simpler method would be to just add an extra menu item, and use custom CSS for that menu item alone. Adding button styling to it.

 

Follow these instructions, this is the simplest way:

 

1. Goto your WordPress Admin Dashboard > Appearance > Menu and add a new link menu item. From now on, this is called Button item, as its going to be your button in the menu.

2. Make sure CSS Classes is checked from the Screen Options panel

3. Now add the following classes to your button item btn btn-default btn-primary

a) You can replace btn-primary with anything you like such as btn-success etc.. see our docs for all color classes

4. Now save the menu and visit your site.

5. You should now have a menu item styled like a button, albeit with an insane amount of line-height.

6. To fix this add the following:

 

.section-navi .pl-nav > li.btn > a {
  line-height: 24px !important;
}
 
This should style any menu item that uses the .btn class inside the navi section and the end result should look like this:
 

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Danny

No problem.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

  • Similar Content

    • 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
    • clj182
      By clj182+
      Hello,
      I've been having trouble unlocking the template section for past couple of weeks. When I try clicking nothing happens. 
      I've deleted my custom css and removed plugins. Im down to having only the following plugins:
      Akismet
      Contact Form 7
      DMS Professional Tools
      Pagelines Updater
      WooCommerce
      It was working fine before i have no idea what's going on with it.
    • flourishdesignstudio
      By flourishdesignstudio+
      My DMS 2 site http://www.heart-stone.com/ will not save any new custom css... I can still edit templates and publish those but any custom css that I enter never saves.
      All WP files, themes, and plugins are up to date. 
      Any thought about what might be causing this?
    • flourishdesignstudio
      By flourishdesignstudio+
      Is there a way to edit the custom CSS via FTP? I know I can edit the custom code in the Chrome editor but is there a file path I can use to find and edit the CSS directly from our FTP?
      Thanks in advance for the help!
    • nizami
      By nizami+
      Using navbar section with correctly configured WP menu to display main navigation at https://elenaangel.com. 
      All fine in desktop viewport. Menu displays twice in hamburger mode. How to fix this please? 

×