Hardcoded Bootstrap Menu

Per Thykjaer Jensen (PETJ) edited this page Apr 11, 2017 · 11 revisions

The top menu is hardcoded. If you know your HTML and CSS it's a workaround, since the WordPress and the Bootstrap menu classes are different.

Why use a hardcoded menu?

WordPress has fine tools for menus, but they will not work out of the box. Some developers may prefer to add the menu via a plugin, or by the wp-navwalker, or perhaps by the odd plugin.

But you could hardcode the menu. There are pros and cons:

  • Pro: You'll get a standard Bootstrap menu.
  • Pro: The menu is designed and styled exactly as you fancy.
  • Con: You (or your costumer) can't edit the menu via the Dashboard.

It is possible to have say a hardcoded top menu and then to add one or several sidemenus. Such menus may be placed whereever you want it in the design. You (and the enduser) is able to edit such menus via the Dashboard.

Build the menu

The code for the menu was build by this creative tool:

If you open a page or post via the Dashboard, you'll be able to copy the link for a page. You can use such a link in the Bootstrap menu.

The HTML

The basic markup is found in menu.php.

The code below demonstrates the principles of the hardcoded menu. Note that Bootstrap's glyphicons are used too.

<!-- Hardcoded bootstrap menu, @url: http://bootstrapdesigntools.com/tools/bootstrap-menu-builder/## -->
<div id="custom-bootstrap-menu" class="navbar navbar-default " role="navigation">
    <div class="container-fluid">
        <div class="navbar-header"><a class="navbar-brand" href="#"><?php bloginfo('name'); ?></a>
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder"><span class="sr-only">Toggle navigation</span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse navbar-menubuilder">
            <ul class="nav navbar-nav navbar-left">

								<!-- home -->
                <li>
									<a href="<?php bloginfo('url'); ?>">
										<span class="glyphicon glyphicon-home" aria-hidden="true"></span> 
										 Home</a>
                </li>

								<!-- Xampp -->
                <li>
									<a href="<?php bloginfo('url'); ?>/1md14y1-intro-day-2-xampp/">
										<span class="glyphicon glyphicon-ice-lolly-tasted" aria-hidden="true"></span> 
									 	Xampp Intro</a>
                </li>

								<!-- MMD Classes -->
                <li class="dropdown"><a href="/products" class="dropdown-toggle" data-toggle="dropdown">MMD Classes <b class="caret"></b></a>
                    <ul class="dropdown-menu" role="menu">
                        <li><a href="/category/MMD2/">MMD2</a></li>
                    </ul>
                </li>

								<!-- About -->
                <li>
									<a href="<?php bloginfo('url'); ?>/about/">
										<span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span> 
										 About</a>
                </li>

								<!-- sitemap -->
                <li>
									<a href="<?php bloginfo('url'); ?>/sitemap/">
										<span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span> 
										 Sitemap</a>
                </li>
            </ul><!-- ends nav -->
        </div>
    </div>
</div><!-- ends bootstrap menu -->

The CSS

The CSS is copied from the Bootstrap Menu Builder mentioned above. You can integrate the CSS in style.css or as a separate stylesheet.

#custom-bootstrap-menu.navbar-default .navbar-brand {
    color: rgba(119, 119, 119, 1);
}
#custom-bootstrap-menu.navbar-default {
    font-size: 14px;
    background-color: rgba(248, 248, 248, 1);
    border-width: 1px;
    border-radius: 4px;
}
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a {
    color: rgba(119, 119, 119, 1);
    background-color: rgba(248, 248, 248, 0);
    background: -webkit-linear-gradient(top, rgba(248, 248, 248, 0) 0%, rgba(248, 248, 248, 0) 100%);
    background: linear-gradient(to bottom, rgba(248, 248, 248, 0) 0%, rgba(248, 248, 248, 0) 100%);
}
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:focus {
    color: rgba(51, 51, 51, 1);
    background-color: rgba(248, 248, 248, 0);
}
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a,
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:focus {
    color: rgba(85, 85, 85, 1);
    background-color: rgba(231, 231, 231, 1);
}
#custom-bootstrap-menu.navbar-default .navbar-toggle {
    border-color: #ddd;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus {
    background-color: #ddd;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle .icon-bar {
    background-color: #888;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover .icon-bar,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus .icon-bar {
    background-color: #888;
}
Clone this wiki locally
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.