[Koha] Implementing Dropdown Menubar in OPAC Header

25 Jun 2018

      Hi,

With Koha 16.11.11 - on Ubuntu 14.04 Desktop -by Package method
Installation,

I am trying to place a bootstrap drop-down menu on OPAC header section.
Please find  the code that has been tried.

The menubar is displaying properly but when I click on it (href) link, it
jumps and moves the link to half-a-page down.

I tried with clearing browser cache, then also not working.  I tried with
other browsers, IE, Mozilla, etc. Problem remains same across the browsers.

I don't have any clues about other codes like JavaScript and CSS also
responsible for it.

I had referred to following URL for the code, but not succeeded.
https://v4-alpha.getbootstrap.com/components/dropdowns/

Kindly share Dropdown header codes (Opac-Header, JS, CSS), if you have
implemented for your Koha OPAC

-------------------
OPAC Header
---------------

<!DOCTYPE html>
<html>
<head>
<style>
.center {
    margin: 0;
    border: 0
    position: relative
    width:100%;
    padding: 0px;
    color: #FFFFFF;
    padding: 0px 15px;
    text-decoration: none;
    font-family: 'Oswald', sans-serif;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: normal;
}

}
</style>
</head>
<body>

<div class="row">
<nav class="navbar navbar-default">

      <ul class="nav navbar-nav">

        <li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-haspopup="true" aria-expanded="false"><strong>ABOUT</strong><span
class="caret"></span></a>
      <li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-haspopup="true" aria-expanded="false"><strong>E-Book</strong><span
class="caret"></span></a>
<ul class="dropdown-menu">
    <li><a href="https://link.springer.com/search?facet-content-type=%
22Book%22&showAll=false"target=”_blank">Springer</a></li>
<li><a href="https://www.tandfonline.com/"target=”_blank">CRC Press</a></li>
 </ul>
 </li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button"
aria-haspopup="true" aria-expanded="false"><strong>E-Journals</strong><span
class="caret"></span></a>
<ul class="dropdown-menu">
    <li><a href="http://ascelibrary.org"target=”_blank”>ASCE</a></li>
<li><a href="http://ieeexplore.ieee.org/Xplore/home.jsp"target=”_blank”>IEEE
DL</a></li>
<li><a href="http://asmedigitalcollection.asme.org/journals.aspx"
target=”_blank">ASME</a></li>
<li><a href="http://search.proquest.com"target=”_blank”>ProQuest</a></li>
<li><a href="http://www.tandfonline.com/"target=”_blank">Taylor &
Francis</a></li>
 </ul>
 </li>
</nav>
</div>

</body>
</html>

-----------------

With thanks
Saitsh MV
Librarian
Govt. Engineering College, Hassan
Karnatka, INDIA.

[Koha] Implementing Dropdown Menubar in OPAC Header

SATISH