Start a new discussion

To start a new discussion please visit the discussions section of the GitHub home page of the project.

Discussions on GitHub

You can also search our old self-hosted forums for any useful information below but please note that posting new content here is not possible any more.

Which CSS/JS files are used with Bootstrap3 ?

Home › Forums › Older releases › 1.0.x + Bootstrap addon › Which CSS/JS files are used with Bootstrap3 ?

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • June 18, 2018 at 18:00 #8290
    Greg Baka
    Participant

    Please explain more completely how to use the “addons” files when installing your menus on a Bootstrap3 based page.
    Here are the questions I could not find answers to…

    (first, CSS stuff)

    1. In the <head> do you call BOTH the standard css file AND the Bootstrap “addons” css file, like this?
    <link href=”css/small-core-css.css” rel=”stylesheet”>
    <link href=”addons/bootstrap/jquery.smartmenus.bootstrap.css” rel=”stylesheet”>
    a) Do you stack them in this order?
    b) Is it best to keep the folder names as shown, or can they be changed without causing problems?

    2. If we want to use one of the pre-configured styles (like .sm-mint) do we FIRST upload the entire sm-mint folder to our css folder, and THEN add this line to the <head> after the two css links above?
    <link href=”css/sm-mint/sm-mint.css” rel=”stylesheet”>
    a) is it ok to change the folder name?

    3. If 1&2 above are correct, then what do we do with the short collection of css code that is shown in the CSS tab of the “Complete navbar .sm-mint” section on the DEMO page?

    (then JS stuff)

    4. Before the closing <body> tag, do you call BOTH the standard js file AND the Bootstrap “addons” js file, like this?
    <script type=”text/javascript” src=”jquery.smartmenus.js”></script>
    <script type=”text/javascript” src=”addons/bootstrap/jquery.smartmenus.bootstrap.js”></script>
    a) Do you stack them in this order?
    b) why are they not in the js/ folder?
    c) Is it best to keep the folder names as shown, or can they be changed without causing problems?

    5. Does the js code shown in the JS tab of the “Complete navbar .sm-mint” section on the DEMO page go in <script> tags right after the html for the button and dropdown menu?

    (about the “Full Width Mega Menu”)

    6. Is there a folder of special CSS for the Full Width Mega Menu? (like for the sm-mint style) When I did the download, that folder did not appear…

    Thank you for all your help 🙂

    Greg

    June 19, 2018 at 11:25 #8291
    admin
    Keymaster

    Hello, that’s a lot of very basic questions and, unfortunately, I have the feeling it would be quite difficult for you to figure it out on your own. It would take less time for me to prepare a demo page, rather than trying to address all your questions. So please just let me know what exactly you need and I will pack a demo for you – which one of these:

    1) Complete navbar .sm-mint
    2) Full Width Mega Menu

    ?

    A note about the Bootstrap addon – if you would like to use the “sm-mint” SmartMenus theme, you don’t need the addon. The addon is needed in case you would like to use Bootstrap’s theme.

    June 19, 2018 at 14:49 #8292
    Greg Baka
    Participant

    Hi Admin,

    Thanks for the fast response! If you can prepare a demo page on how to use the Mega Menu on a Bootstrap3 site, that would be great.

    Thanks,

    Greg

    June 21, 2018 at 14:30 #8293
    admin
    Keymaster

    There you go:

    http://www.smartmenus.org/files/misc/SmartMenus%20jQuery%20Bootstrap%203%20Mega%20Menus.zip

    June 21, 2018 at 23:12 #8295
    Greg Baka
    Participant

    Thank you Admin. That does work nicely!

    But I see that it is different from the demo version of the Mega Menu style on your site. The difference is the mobile-version’s “hamburger” icon (3 horizontal bars) and how it displays and acts….
    – On your demo, it shares the same space and background with the word Brand …AND most importantly it has the cool “re-arrange into an X” when opened action.
    – The version you just sent has the mobile-version’s “hamburger” icon on an actual button that does not re-arrange into an X

    What code changes would be needed to have it work just like your Demo version of the Mega Menu? (still on a Bootstrap3 site)

    June 25, 2018 at 13:10 #8296
    admin
    Keymaster

    You will need to replace the Bootstrap button’s default HTML:

    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
  <span class="sr-only">Toggle navigation</span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
</button>

    with something like this:

    <!-- Mobile menu toggle button (hamburger/x icon) -->
<input id="main-menu-state" type="checkbox" data-toggle="collapse" data-target=".navbar-collapse" />
<label class="main-menu-btn" for="main-menu-state">
  <span class="main-menu-btn-icon"></span> Toggle main menu visibility
</label>

    And then use some additional CSS to style it:

    .main-menu-btn {
  float: right;
  position: relative;
  display: inline-block;
  margin: 10px 15px;
  width: 28px;
  height: 28px;
  text-indent: 28px;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}
/* hamburger icon */
.main-menu-btn-icon, .main-menu-btn-icon:before, .main-menu-btn-icon:after {
  position: absolute;
  top: 50%;
  left: 2px;
  height: 2px;
  width: 24px;
  background: #bbb;
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
}
.main-menu-btn-icon:before {
  content: '';
  top: -7px;
  left: 0;
}
.main-menu-btn-icon:after {
  content: '';
  top: 7px;
  left: 0;
}
/* x icon */
#main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon {
  height: 0;
  background: transparent;
}
#main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon:before {
  top: 0;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
#main-menu-state:checked ~ .main-menu-btn .main-menu-btn-icon:after {
  top: 0;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
/* hide menu state checkbox (keep it visible to screen readers) */
#main-menu-state {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(1px,1px,1px,1px);
}
@media (min-width: 768px) {
  /* hide the button in desktop view */
  .main-menu-btn {
    position: absolute;
    top: -99999px;
  }
}
  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘1.0.x + Bootstrap addon’ is closed to new topics and replies.