Fixing some issues with my navbar

I’ve got several different problems happening with my navbar, and I’m hoping some one with some more experience can help me out. Currently, the site opens with a banner across the top, logo on the left side, and and the buttons for the menu at the very top. When I click the drop down menu’s, they do open up, but they open up aligned under the Home button. Also, if I then click another drop down menu, the other remains open instead of closing and opening the other one. Here is what I need to fix:

  1. When opening a drop down menu, the menu should open up underneath the button that was clicked, not way off to the left.
  2. I need the buttons at the bottom of the banner, not at the top. I also need them to be spaced a bit differently, but that much I think I can figure out on my own.
  3. I need the drop down menus to close themselves when clicking another one of the buttons at the head of the page.
  4. If the logo can be moved further left that would be awesome, but I can’t seem to do it. I tried making the div it is in 100% width, but it didn’t make it any wider.

Any and all help will be greatly appreciated!

<!DOCTYPE html>
<html>

<head>
    <link href="\stylesheet.css" rel="stylesheet"/>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

    <script type="text/javascript">
        function active()
        {
            var search = document.getElementById('search');
            if (search.value == "") {
                search.value = "";
                search.placeholder = "Search...";
            }
        }

        function inactive() {
            var search = document.getElementById('search');
            if (search.value == "Search...") {
                search.value = "Search...";
                search.placeholder = "";
            }
        }

    </script>
</head>
<body id="layoutBody">



     <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <div>
                    <img  src="~/Content/Images/sm_logo.png" alt="sm_logo">
                    <img  src="~/Content/Images/logo.png" alt="logo">
                </div>
            </div>
            <div>
                <div style="background-color: blue;" class="container">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle"
                                data-toggle="collapse"
                                data-target=".navbar-collapse">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>

                    </div>
                    <div class="collapse navbar-collapse parentMenu">
                        <ul class="nav navbar-nav">
                            <li class="active">
                                <a>
                                    Home
                                </a>
                            </li>
                            <li>
                                <a data-toggle="collapse"
                                   data-target=".navbar-collapse2">
                                    Our Company
                                </a>
                            </li>
                            <li>
                                <a data-toggle="collapse"
                                   data-target=".navbar-collapse3">
                                    Employee Services
                                </a>
                            </li>
                            <li>
                                <a data-toggle="collapse"
                                   data-target=".navbar-collapse4">
                                    Support
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="collapse navbar-collapse2 childMenu">
                        <ul class="nav navbar-nav">
                            <li class="active"><a>@Html.ActionLink("Our History", "Index", "OurCompany")</a></li>
                            <li><a>@Html.ActionLink("Facilities", "Facilities", "OurCompany")</a></li>
                        </ul>
                    </div>
                    <div class="collapse navbar-collapse3 childMenu">
                        <ul class="nav navbar-nav">
                            <li class="active"><a data-toggle="collapse" data-target=".navbar-collapse5">Forms</a></li>
                            <li><a>Pay Stubs</a></li>
                            <li><a>Insurance Benefits Portal</a></li>
                        </ul>
                    </div>
                    <div class="collapse navbar-collapse4 childMenu">
                        <ul class="nav navbar-nav">
                            <li class="active"><a>ISS Support Request</a></li>
                            <li><a>Purchase Request</a></li>
                            <li><a>Maint Request</a></li>
                        </ul>
                    </div>
                    <div class="collapse navbar-collapse5 childMenu">
                        <ul class="nav navbar-nav">
                            <li class="active"><a data-toggle="collapse" data-target=".navbar-collapse6">@Html.ActionLink("HR Forms", "HRForms", "FormsHandlers")</a></li>
                            <li><a data-toggle="collapse" data-target=".navbar-collapse7">@Html.ActionLink("Corporate Forms", "CorporateForms", "FormsHandlers")</a></li>
                            <li><a data-toggle="collapse" data-target=".navbar-collapse8">@Html.ActionLink("Employee Benefits", "EmployeeBenefitsForms", "FormsHandlers")</a></li>
                            <li><a data-toggle="collapse" data-target=".navbar-collapse9">@Html.ActionLink("Accident Forms", "AccidentForms", "FormsHandlers")</a></li>
                        </ul>
                    </div>
                    <div class="collapse navbar-collapse6 childMenu">
                        <ul class="nav navbar-nav">
                            <li class="active"><a>Insert form name here</a></li>
                            <li><a>Insert form name here</a></li>
                            <li><a>Insert form name here</a></li>
                        </ul>
                    </div>
                    <div class="collapse navbar-collapse7 childMenu">
                        <ul class="nav navbar-nav">
                            <li class="active"><a>Insert form name here</a></li>
                            <li><a>Insert form name here</a></li>
                            <li><a>Insert form name here</a></li>
                        </ul>
                    </div>
                    <div class="collapse navbar-collapse8 childMenu">
                        <ul class="nav navbar-nav">
                            <li class="active"><a>Insert form name here</a></li>
                            <li><a>Insert form name here</a></li>
                            <li><a>Insert form name here</a></li>
                        </ul>
                    </div>
                    <div class="collapse navbar-collapse8 childMenu">
                        <ul class="nav navbar-nav">
                            <li class="active"><a>Insert form name here</a></li>
                            <li><a>Insert form name here</a></li>
                            <li><a>Insert form name here</a></li>
                        </ul>
                    </div>


                    <!--/.nav-collapse -->
                </div>
            </div>
            <script>
                // when menu item clicked
                $('.collapse').click(function () {
                    // close navbar if open
                    $(".navbar-toggle:not(.collapsed)").click();
                    $(this).removeClass("in").addClass("collapse");
                    $(".navbar-default .in").removeClass("in").addClass("collapse");
                });
                // when menu item clicked
                $('.navbar-toggle').click(function () {
                    // close navbar if open
                    $(".navbar-toggle:not(.collapsed)").click();
                    $(this).removeClass("in").addClass("collapse");
                    $(".childMenu.in").removeClass("in").addClass("collapse");
                });
            </script>
        </div>
    </div>
        <div class="container body-content">
    @RenderBody()
    <hr/>
    <footer>
        <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
    </footer>
</div>

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>

</html>

.layoutBody {
    background: #353c3e;
}

ethanforbes89,

Overall, you’ve done a commendable job of formatting your HTML and describing the problems that you are having. For that reason, I hate to rain on your presentation, but here goes…

(1) Part of the delay in addressing your issue is a need for someone who works with ASP.NET applications.
(2) The links in your HTML are all relative links. As such they are “pointless” to us. They do not open target files such as the CSS stylesheet, images, etc. Without full URLs, we have no idea how the HTML behaves.
(3) There is some stray CSS below the close </html> tag.

If you can post a link to the site so we can see the code in action, we may be able to assist.

So if I click a button on the navbar, and the drop down menu opens up, but then I click another button at the top of the navbar, I get another dropdown open, but the first one does not close. How can I make the other one close if another button is clicked, or if the user clicks on the main page?

<!DOCTYPE html>
<html>

<head>
    <link href="\stylesheet.css" rel="stylesheet"/>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

    <script type="text/javascript">
        function active()
        {
            var search = document.getElementById('search');
            if (search.value == "") {
                search.value = "";
                search.placeholder = "Search...";
            }
        }

        function inactive()
        {
            var search = document.getElementById('search');
            if (search.value == "Search...") {
                search.value = "Search...";
                search.placeholder = "";
            }
        }

    </script>
</head>
<body id="layoutBody">
     <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <div>
                    <img  src="~/Content/Images/sm_logo.png" alt="sm_logo">
                    <img  src="~/Content/Images/logo.png" alt="logo">
                </div>
            </div>
            <div>
                <div class="container">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle"
                                data-toggle="collapse"
                                data-target=".navbar-collapse">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>

                    </div>
                    <div class="collapse navbar-collapse parentMenu">
                        <ul id="mainbar" class="nav navbar-nav">
                            <li class="active">
                                <a>
                                    Home
                                </a>
                            </li>
                            <li>
                                <a data-toggle="collapse"
                                   data-target=".navbar-collapse2">
                                    Our Company
                                </a>
                            </li>
                            <li>
                                <a data-toggle="collapse"
                                   data-target=".navbar-collapse3">
                                    Employee Services
                                </a>
                            </li>
                            <li>
                                <a data-toggle="collapse"
                                   data-target=".navbar-collapse4">
                                    Support
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="collapse navbar-collapse2 childMenu">
                        <ul id="OurCompanyTabs" class="nav nav-stacked">
                            <li id="layoutlist" class="active"><a>@Html.ActionLink("Our History", "Index", "OurCompany")</a></li>
                            <li id="layoutlist"><a>@Html.ActionLink("Facilities", "Facilities", "OurCompany")</a></li>
                        </ul>
                    </div>
                    <div class="collapse navbar-collapse3 childMenu">
                        <ul id="EmployeeServicesTabs" class="nav nav-stacked">
                            <li id="layoutlist" class="active"><a data-toggle="collapse" data-target=".navbar-collapse5">Forms</a></li>
                            <li id="layoutlist"><a>Pay Stubs</a></li>
                            <li id="layoutlist"><a>Insurance Benefits Portal</a></li>
                        </ul>
                    </div>
                    <div class="collapse navbar-collapse4 childMenu">
                        <ul id="SupportTabs" class="nav nav-stacked">
                            <li id="layoutlist" class="active"><a>ISS Support Request</a></li>
                            <li id="layoutlist"><a>Purchase Request</a></li>
                            <li id="layoutlist"><a>Maint Request</a></li>
                        </ul>
                    </div>
                    <div class="collapse navbar-collapse5 childMenu">
                        <ul id="forms" class="nav nav-stacked nav">
                            <li id="formsChild" class="active"><a data-toggle="collapse" data-target=".navbar-collapse6">@Html.ActionLink("HR Forms", "HRForms", "FormsHandlers")</a></li>
                            <li id="formsChild"><a data-toggle="collapse" data-target=".navbar-collapse7">@Html.ActionLink("Corporate Forms", "CorporateForms", "FormsHandlers")</a></li>
                            <li id="formsChild"><a data-toggle="collapse" data-target=".navbar-collapse8">@Html.ActionLink("Employee Benefits", "EmployeeBenefitsForms", "FormsHandlers")</a></li>
                            <li id="formsChild"><a data-toggle="collapse" data-target=".navbar-collapse9">@Html.ActionLink("Accident Forms", "AccidentForms", "FormsHandlers")</a></li>
                        </ul>
                    </div>
                    <div class="collapse navbar-collapse6 childMenu">
                        <ul class="nav navbar-nav">
                            <li class="active"><a>Insert form name here</a></li>
                            <li><a>Insert form name here</a></li>
                            <li><a>Insert form name here</a></li>
                        </ul>
                    </div>
                    <div class="collapse navbar-collapse7 childMenu">
                        <ul class="nav navbar-nav">
                            <li class="active"><a>Insert form name here</a></li>
                            <li><a>Insert form name here</a></li>
                            <li><a>Insert form name here</a></li>
                        </ul>
                    </div>
                    <div class="collapse navbar-collapse8 childMenu">
                        <ul class="nav navbar-nav">
                            <li class="active"><a>Insert form name here</a></li>
                            <li><a>Insert form name here</a></li>
                            <li><a>Insert form name here</a></li>
                        </ul>
                    </div>
                    <div class="collapse navbar-collapse8 childMenu">
                        <ul class="nav navbar-nav">
                            <li class="active"><a>Insert form name here</a></li>
                            <li><a>Insert form name here</a></li>
                            <li><a>Insert form name here</a></li>
                        </ul>
                    </div>
                    <form id="searchbar" method="post">
                        <input type="text" id="search" placeholder="Search..." maxlength="50" autocomplete="off" onmousedown="active();" onblur="inactive();">
                        <input type="submit" id="searchbutton" value="Go!" />
                    </form>

                    <!--/.nav-collapse -->
                </div>
            </div>
            <script>
                // when menu item clicked
                $('.collapse').click(function () {
                    // close navbar if open
                    $(".navbar-toggle:not(.collapsed)").click();
                    $(this).removeClass("in").addClass("collapse");
                    $(".navbar-default .in").removeClass("in").addClass("collapse");
                });
                // when menu item clicked
                $('.navbar-toggle').click(function () {
                    // close navbar if open
                    $(".navbar-toggle:not(.collapsed)").click();
                    $(this).removeClass("in").addClass("collapse");
                    $(".childMenu.in").removeClass("in").addClass("collapse");
                });
            </script>
        </div>
    </div>
        <div class="container body-content">
    @RenderBody()
    <hr/>
    <footer>
        <p>&copy; @DateTime.Now.Year - SC2 MyLink</p>
    </footer>
</div>

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>

</html>


#layoutBody {
    background: #353c3e;
    color: white;
}
#mainbar {
    margin-top: 4%;

}
#OurCompanyTabs {
    margin-left: 28.5%;
    position: absolute;
    z-index: 105;
    background-color: #555555;
}
#EmployeeServicesTabs {
    margin-left: 36%;
    position: absolute;
    z-index: 106;
    background-color: #555555;
}
#SupportTabs {
    margin-left: 46%;
    position: absolute;
    z-index: 107;
    background-color: #555555;
}
#layoutlist a {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
}
    /* Change the link color on hover */
#layoutlist a:hover {
    background-color: #555;
    color: white;
}
#searchbar {
    float: right;
}
#forms {
    position: absolute;
    z-index: 109;
    margin-left: 48.5%;
    background-color: #555555;
}
#formsChild {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;

}
#formsChild a:hover {
    background-color: #555;
    color: white;
}

ethanforbes89,

Is this a continuation or branch of your previous post?
Fixing some issues with my navbar

The code sure looks the same except for the addition of out of place CSS below the close HTML tag.

Well, I have fixed the majority of the problems on the other post, and I thought maybe I wasn’t getting any responses on it because of the large amounts of issues. This is the only remaining problem I’m having at the moment. The css I just copied and pasted down there so it would all be there. In reality, it’s on a style sheet. Towards the bottom of the html, you’ll see a javascript script that I found online and that is what is controlling most of the drop down menu’s. I think something to do with that is what is keeping the menu’s from collapsing, but I can’t seem to figure it out.

I have merged the two threads together so that we don’t have two threads with the same topic.

2 Likes

The only ways I have found to toggle the display of multiple page elements is to either explicitly set them individually or to loop through them.

For example, a “show_a” might be

show_a(){
a = show;
b = hide;
c = hide;
d = hide;

where b, c, d … would be almost identical but with the show and hides different.

As you can see, this may work OK for relatively small limited use, but is a poor way to code anything more.

IMHO, it is better to loop through the elements and change everything else to “hide”.

A common way of doing this is to add / remove class attribute values and use CSS to control the display. That is, not having the script set style attribute values directly.

1 Like

I think that’s going to take too much work to get working as you have a weird structure there and would need custom JS to manage the toggling of those menus.

You would be better off following someone else’s menu that has a better structure and is fully working.

https://www.bootply.com/nZaxpxfiXz

There are others around if you search and you will see that they use nested menus rather than separate divs.

No that just controls the toggle of the hamburger button to show the menu but not the drop downs as such. The menus are working with bootstrap js and will still work if you removed that script.

This looks like it should work. I won’t have time to implement it today, but I’ll try it out tomorrow and see how it turns out. Thanks very much!

Ok so I’ve begun implementing this, however, I’m not able to get the nested drop down menus to open. It shows the caret and I have them all coded, but nothing is coming out when I click the button, it just causes the menu to close. Any ideas? I copied and pasted directly from the above link and tested it, it immediately did not work. I then modified the code to fit what I need, and tried everything I could to get it to work as designed, but nothing yet.

HTML

<!DOCTYPE html>
<html>

<head>
    <link href="\stylesheet.css" rel="stylesheet"/>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

    <script type="text/javascript">
        function active()
        {
            var search = document.getElementById('search');
            if (search.value == "") {
                search.value = "";
                search.placeholder = "Search...";
            }
        }

        function inactive()
        {
            var search = document.getElementById('search');
            if (search.value == "Search...") {
                search.value = "Search...";
                search.placeholder = "";
            }
        }

    </script>
    <script>
        (function($){
            $(document).ready(function(){
                $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
                    event.preventDefault(); 
                    event.stopPropagation(); 
                    $(this).parent().siblings().removeClass('open');
                    $(this).parent().toggleClass('open');
                });
            });
        })(jQuery);
    </script>
</head>
<body id="layoutBody">
<nav class="navbar navbar-inverse navbar-static-top marginBottom-0" role="navigation">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
            <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-left" href="#"><img src="" alt="Browser does not support image."/></a>
    </div>

    <div class="collapse navbar-collapse" id="navbar-collapse-1">
        <ul class="nav navbar-nav">
            <li class="active"><a>@Html.ActionLink("Home", "Index", "Home")</a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Our Company<b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="#">@Html.ActionLink("Our History", "Index", "OurCompany")</a></li>
                    <li><a href="#">@Html.ActionLink("Facilities", "Facilities", "OurCompany")</a></li>
                </ul>
            </li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Employee Services<b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li class="dropdown dropdown-submenu">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Forms</a>
                        <ul class="dropdown-menu">
                            <li><a href="#">@Html.ActionLink("HR Forms", "HRForms", "FormsHandlers")</a></li>
                            <li><a href="#">@Html.ActionLink("Corporate Forms", "CorporateForms", "FormsHandlers")</a></li>
                            <li><a href="#">@Html.ActionLink("Employee Benefits", "EmployeeBenefitsForms", "FormsHandlers")</a></li>
                            <li><a href="#">@Html.ActionLink("Accident Forms", "AccidentForms", "FormsHandlers")</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Pay Stubs</a></li>
                    <li><a href="#">Insurance Benefits Portal</a></li>
                </ul>
            </li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Support Services<b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="#">ISS Support</a></li>
                    <li><a href="#">Purchase Requests</a></li>
                    <li><a href="#">Maint. Support</a></li>
                </ul>
            </li>
        </ul>
    </div><!-- /.navbar-collapse -->
</nav>

@RenderBody()
<hr />
<footer>
    <p>&copy; @DateTime.Now.Year - SC2 MyLink</p>
</footer>

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
</body>

</html>

CSS

.marginBottom-0 {
    margin-bottom: 0;
}
.dropdown-submenu {
    position: relative;
}
.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px 6px;
    border-radius: 0 6px 6px 6px;
}
.dropdown-submenu > a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #cccccc;
    margin-top: 5px;
    margin-right: -10px;
}
.dropdown-submenu:hover > a:after {
    border-left-color: #555;
}
.dropdown-submenu.pull-left {
    float: none;
}
.dropdown-submenu.pull-left > .dropdown-menu {
    left: -100%;
    margin-left: 10px;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
}

It’s working, you just need to put the scripts using jquery after the call to the jquery library and not before where jquery doesn’t exist yet.

e.g.
( I’ve used the CDN links to show a working example).

<!DOCTYPE html>
<html>
<head>
<link href="\stylesheet.css" rel="stylesheet"/>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
@Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
    <style>
.marginBottom-0 {
	margin-bottom: 0;
}
.dropdown-submenu {
	position: relative;
}
.dropdown-submenu > .dropdown-menu {
	top: 0;
	left: 100%;
	margin-top: -6px;
	margin-left: -1px;
	-webkit-border-radius: 0 6px 6px 6px;
	-moz-border-radius: 0 6px 6px 6px;
	border-radius: 0 6px 6px 6px;
}
.dropdown-submenu > a:after {
	display: block;
	content: " ";
	float: right;
	width: 0;
	height: 0;
	border-color: transparent;
	border-style: solid;
	border-width: 5px 0 5px 5px;
	border-left-color: #cccccc;
	margin-top: 5px;
	margin-right: -10px;
}
.dropdown-submenu:hover > a:after {
	border-left-color: #555;
}
.dropdown-submenu.pull-left {
	float: none;
}
.dropdown-submenu.pull-left > .dropdown-menu {
	left: -100%;
	margin-left: 10px;
	-webkit-border-radius: 6px 0 6px 6px;
	-moz-border-radius: 6px 0 6px 6px;
	border-radius: 6px 0 6px 6px;
}
</style>
    </head><body id="layoutBody">
<nav class="navbar navbar-inverse navbar-static-top marginBottom-0" role="navigation">
      <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1"> <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-left" href="#"><img src="" alt="Browser does not support image."/></a> </div>
      <div class="collapse navbar-collapse" id="navbar-collapse-1">
    <ul class="nav navbar-nav">
          <li class="active"><a>@Html.ActionLink("Home", "Index", "Home")</a></li>
          <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Our Company<b class="caret"></b></a>
        <ul class="dropdown-menu">
              <li><a href="#">@Html.ActionLink("Our History", "Index", "OurCompany")</a></li>
              <li><a href="#">@Html.ActionLink("Facilities", "Facilities", "OurCompany")</a></li>
            </ul>
      </li>
          <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Employee Services<b class="caret"></b></a>
        <ul class="dropdown-menu">
              <li class="dropdown dropdown-submenu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Forms</a>
            <ul class="dropdown-menu">
                  <li><a href="#">@Html.ActionLink("HR Forms", "HRForms", "FormsHandlers")</a></li>
                  <li><a href="#">@Html.ActionLink("Corporate Forms", "CorporateForms", "FormsHandlers")</a></li>
                  <li><a href="#">@Html.ActionLink("Employee Benefits", "EmployeeBenefitsForms", "FormsHandlers")</a></li>
                  <li><a href="#">@Html.ActionLink("Accident Forms", "AccidentForms", "FormsHandlers")</a></li>
                </ul>
          </li>
              <li><a href="#">Pay Stubs</a></li>
              <li><a href="#">Insurance Benefits Portal</a></li>
            </ul>
      </li>
          <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Support Services<b class="caret"></b></a>
        <ul class="dropdown-menu">
              <li><a href="#">ISS Support</a></li>
              <li><a href="#">Purchase Requests</a></li>
              <li><a href="#">Maint. Support</a></li>
            </ul>
      </li>
        </ul>
  </div>
      <!-- /.navbar-collapse --> 
    </nav>
@RenderBody()
<hr />
<footer>
      <p>&copy; @DateTime.Now.Year - SC2 MyLink</p>
    </footer>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false) 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<script type="text/javascript">
        function active()
        {
            var search = document.getElementById('search');
            if (search.value == "") {
                search.value = "";
                search.placeholder = "Search...";
            }
        }

        function inactive()
        {
            var search = document.getElementById('search');
            if (search.value == "Search...") {
                search.value = "Search...";
                search.placeholder = "";
            }
        }

    </script> 
<script>
        (function($){
            $(document).ready(function(){
                $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
                    event.preventDefault(); 
                    event.stopPropagation(); 
                    $(this).parent().siblings().removeClass('open');
                    $(this).parent().toggleClass('open');
                });
            });
        })(jQuery);
    </script>
</body>
</html>
1 Like

Awesome! That took care of that problem. I didn’t realize it needed to be below that, I’m still fairly new to this obviously. I have one other issue still. The home button is sitting lower than all the other buttons. I’ve tried adjusting it but for some reason it seems like the text is not where it should be?

I’d need to see your updated code as my example above does not exhibit this problem.

You should set up a free codepen account (or similar) and then you can post working examples that demonstrate the problem as it makes it so much easier for us to debug :slight_smile:

I will definitely check out codepen, thanks for the advice! I actually got this working though so I’m good to go! Than you so much for your help!

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.