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

Home Forums Older releases 1.0.x + Bootstrap addon Fix a few style issues with Mega Menu on a Bootstrap3 site?

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #8305
    Greg Baka
    Participant

    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

    #8306
    admin
    Keymaster

    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!

    #8307
    Greg Baka
    Participant

    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.

Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.

Register

You will be emailed a link to set your password.

Login

Lost password?