Fix a few style issues with Mega Menu on a Bootstrap3 site?

[Greg Baka]

Hello admin. You were very helpful before getting me started using your great nav bar system. I have a few final questions…

Here is my sample page using your Mega Menu on a Bootstrap 3 site:
https://www.easydigging.com/kern/product-page-shovel5.html

1. On larger devices (lg,md,sm classes) is there an easy way to automatically center the nav links in the horizontal bar?
((current sample page has blank li’s entered before and after the visible links to move the list approximately to the center position))

2. On phones (xs class) how do we get the square buttons with the + symbol (on the right side of the dropdown) to switch to displaying a – symbol when opened?
(((the + button for “All Attachments” in the “Wheel Hoe” dropdown does switch to – when opened, so I see it is possible)))

Thank you so much,

Greg

[admin]

Hi,

You would need to edit the following file:

https://www.easydigging.com/kern/jquery.smartmenus.bootstrap.css

1) Remove your spacer <li>‘s from your navbar HTML source and in the CSS file above find and replace the following:

@media (min-width: 768px) {
  #main-menu {
    float: right;
    clear: none;
  }
}

with the following:

@media (min-width: 768px) {
  .navbar-collapse {
    text-align: center;
    font-size: 1px;
  }
  #main-menu {
    display: inline-block;
    float: none;
    clear: none;
  }
}

2) The issue is caused by your custom .nav-tweak DIV’s that are inside your main menu links. To avoid it, in the same CSS file, replace the following:

.navbar-nav.sm-collapsible .open > a > .caret:before {
  content: '-';
}

with the following:

.navbar-nav.sm-collapsible .open > a .caret:before {
  content: '-';
}

Cheers!

[Greg Baka]

Thanks!

They seem to work. Though I put them in my final CSS sheet so I didn’t have to alter the standard CSS sheets supplied with your menu bar.

[Author]

Posts