Bootstrap Navigation issues while using Adobe Business Catalyst

Question

While working on my portfolio, I found that I ran into some issues when I loaded my Bootstrap site into Adobe Business Catalyst. I have been able to fix most of the bugs, except for the navigation. For some reason I am not able to use the dropdown functions when viewing on a full screen or a smaller screen. My navigation is currently laid out as:

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="home.html"><img src="images/logo.png" alt="logo" class="img-responsive"></a>
    </div>
    <div id="navbar" class="navbar-collapse collapse">
      <ul id="customnav">
              <li class="active"><a href="home.html">Home</a></li>

              <!--Portfolio-->
              <li role="presentation" class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="portfolio.html" role="button" aria-haspopup="true" aria-expanded="false"> Portfolio <span class="caret"></span> </a>
                    <ul class="dropdown-menu">
                        <li> <a href="about.html"> About </a> </li>
                        <li> <a href="image.html"> Image </a> </li>
                        <li> <a href="video.html"> Video </a> </li>
                        <li> <a href="program.html"> Programming </a> </li>
                        <li> <a href="sound.html"> Sound </a> </li>
                    </ul>
        </li>
                <!--Music-->
              <li role="presentation" class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="music.html" role="button" aria-haspopup="true" aria-expanded="false"> Music <span class="caret"></span> </a>
                    <ul class="dropdown-menu">
                        <li> <a href="performances.html"> Performances </a> </li>
                        <li> <a href="songs.html"> Song List </a> </li>
                    </ul>
        </li>

                <!--Travel-->
              <li role="presentation" class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="travel.html" role="button" aria-haspopup="true" aria-expanded="false"> Travel <span class="caret"></span> </a>
                    <ul class="dropdown-menu">
                        <li> <a href="2014.html"> 2014 </a> </li>
                        <li> <a href="2013.html"> 2013 </a> </li>
                        <li> <a href="2012.html"> 2012 </a> </li>
                        <li> <a href="2011.html"> 2011 </a> </li>
                        <li> <a href="2010.html"> 2010 </a> </li>
                    </ul>
        </li>
      </ul>
    </div><!--/.navbar-collapse -->
  </div>
</nav>

I also have the following css for the navigation:

    /* Nav */
    #customnav li{
    list-style: none;
    font-family: 'Handlee', cursive;
    font-size: 22px !important;
    font-weight: bold !important;
    margin-bottom: 5px;
    margin-top: 5px;
    color: #BF9FB1 !important;
    }

    .navbar-inverse {
        background-color: #3B3C59 !important;
    }

    #customnav a:hover, #customnav li a:focus {
      background-color: transparent;
      color: #F2DFED !important;
      border-bottom: 3px solid #F2DFED;
      text-decoration: none;
    }
    #customnav .active > a, #customnav .active a:hover, #customnav .active a:focus {
      color: #F2DFED !important;
      border-bottom-color: #F2DFED;
      text-decoration: none;
    }

    .dropdown-menu{
        background-color: #3B3C59 !important;
        display: none !important;
    }

    .dropdown-menu li a{
        display: flex !important;
        margin-left: 20px;
        color: #BF9FB1 !important;
    }

/* Full Screen */
@media (min-width: 768px) {

/*Nav*/
#customnav{
    margin-right: 40px !important;
    margin-left: 0px !important;
    padding-left: 0px !important;
}

#customnav li{
display: inline-block;
font-family: 'Handlee', cursive;
}

#customnav li + li {
  margin-left: 20px;
  margin-top: 15px;
}
#customnav li a {
  padding-right: 0;
  padding-left: 0;
  font-size: 22px !important;
  font-weight: bold !important;
  color: #BF9FB1 !important; 
  border-bottom: 3px solid transparent;
}
#customnav a:hover, #customnav li a:focus {
  background-color: transparent;
  color: #F2DFED !important;
  border-bottom: 3px solid #F2DFED;
  text-decoration: none;
}
#customnav .active > a, #customnav .active a:hover, #customnav .active a:focus {
  color: #F2DFED !important;
  border-bottom-color: #F2DFED;
  text-decoration: none;
}

.navbar-inverse {
    background-color: #3B3C59 !important;
}

.dropdown-menu{
    background-color: #3B3C59 !important;
    display: none !important;
}

.dropdown-menu li{
    display: flex !important;
    margin-left: 20px;
}

.dropdown-menu li a{
    font-size: 18px !important;
}

If it is helpful, my portfolio is located at: laurenkapraun.com

Any help would be very much appreciated!! Thank You so much in advanced!

Answer 1

Find the main ul that holds your navigation and add the following classes:

<ul id="customnav" class="nav navbar-nav">

Then in the CSS, remove all the code you made to replicate what these classes above already gave you from Bootstrap and leave only this css:

 #customnav li{
   list-style: none;
   font-family: 'Handlee', cursive;
   font-size: 22px !important;
   font-weight: bold !important;
   margin-bottom: 5px;
   margin-top: 5px;
   color: #BF9FB1 !important;
}

Now the dropdowns work. All you need to do is correct the colors and some minor tweaks. But all the css functionality is inherited from the framework (main reason you are using Bootstrap, right?) :)

See the working DEMO