Implementing Dropdown Menubar in OPAC Header
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.
I am trying to place a bootstrap drop-down menu on OPAC header section. Please find the code that has been tried.
Aside from one minor markup error I find that your example works fine for me. I'm not sure what you want it to look like, but I think you're missing a closing </li> after the first <li class="dropdown">. That might not be right, though, since that would make your "About" menu empty. Double-check your markup, because I think that is the root of your problem.
I had referred to following URL for the code, but not succeeded. https://v4-alpha.getbootstrap.com/components/dropdowns/
You're referring to documentation for the Bootstrap version 4 Alpha release. The OPAC still uses Bootstrap 2.x, so you should look here: https://getbootstrap.com/2.3.2/components.html#dropdowns -- Owen -- Web Developer Athens County Public Libraries http://www.myacpl.org
Hi Owen, Thank you for the reply. The view of the dropdown looks fine! But, its functioning properly, onclick, it jumps. I have uploaded the video on google drive. Kindly check link. https://drive.google.com/file/d/1rIov7BnLBhu4YmjtF1KELFYU7B_ C45K_/view?usp=sharing -Satish
Hi, I have resolved my problem. Since, I was copied down codes of the respective OPAC sections either from blogs or examples given in websites, made it overlap. I removed complete HTML or CSS or JS codes from opacheader, OpacMainUserBlock, OpacNav, OpacNavRight. And kept only opacheader codes. Onclick fuction, it behaved properly. Then inspecting codes of each OPAC section one by one. and pasting back the codes one by one and verified the header section at each stage. At OpacMainUserBlock, I found, <style type="text/css"> a:focus { outline: none; margin-top:20em; } and margin-top:2oem; was annoying. After removing this part, whole of the OPAC Page, functions as per the requirement. With Thanks Satish
participants (2)
-
Owen Leonard -
SATISH