I have a problem with dropdown bootstrap menu in joomla. It looks like it's expaneded all the time. I've already overwritten a mod_menu, so < li > have a class = "nav-item" and I think it can be cause of this problem. Maybe someone had a simillar problem, and know how to solve this. enter image description here
The red element's should be visible only when i focus the 'dropdown menu', but they are visible all the time.
There is a html of the menu (Sorry for the style of code)
<nav class="navbar navbar-light navbar-expand-md" id="navbar" style="background-color:#282d32;">
<div class="container-fluid">
<a class="navbar-brand" href="#" id="logo" style="color:#ffffff;font-size:25px;font-weight:500;letter-spacing:0px;font-family:'Noto Sans', sans-serif;"><strong>#</strong></a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navcol-1">
<span class="sr-only">Toggle navigation</span>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navcol-1" style="font-family:'Noto Sans', sans-serif;">
<ul class="nav navbar-nav ml-auto" id="nav">
<li class="item-106 nav-item">Main</li><li class="item-107 deeper parent nav-item">Dropdown menu<ul class="nav navbar-nav ml-auto"><li class="item-108 nav-item">First
</li><li class="item-115 nav-item">Second</li>
<li class="item-109 nav-item">Third</li>
<li class="item-110 nav-item">Wywrotki</li>
</ul>
</li>
<li class="item-112 nav-item">
xxx
</li>
</ul>
</div>
</div>
</nav>
Edit: I forgot about fourth element in the menu, dont worry about this.
I would like to achieve something like 'hover me' on this page:
https://www.w3schools.com/howto/howto_css_dropdown.asp
the example in the link ( W3School ) is done with only css, but you html has bootstrap classes
so to make the dropdown work you need bootstrap's .js and
here's a working fiddle : https://jsfiddle.net/69hev2g4/23/
basically you needed an id for the second ul and add data-target and dropdown-collapse to the link before , and the class collapse for it to be hidden at first,
<nav class="navbar navbar-light" id="navbar" style="background-color:#282d32;">
<div class="container-fluid">
<a class="navbar-brand" href="#" id="logo" style="color:#ffffff;font-size:25px;font-weight:500;letter-spacing:0px;font-family:'Noto Sans', sans-serif;"><strong>#</strong></a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navcol-1">
<span class="sr-only">Toggle navigation</span>
<span class="navbar-toggler-icon"></span>
</button>
<div class="" id="navcol-1" style="font-family:'Noto Sans', sans-serif;">
<ul class="nav navbar-nav " id="nav" >
<li class="item-106 nav-item">Main</li>
<li class="item-107 deeper parent nav-item" style="width:284px;">Dropdown menu
<ul class="nav navbar-nav collapse"id="dropdown">
<li class="item-108 nav-item">First</li>
<li class="item-115 nav-item">Second</li>
<li class="item-109 nav-item">Third</li>
<li class="item-110 nav-item">Wywrotki</li>
</ul>
</li>
<li class="item-112 nav-item">
xxx
</li>
</ul>
</div>
</div>
</nav>
you can use this tool to see the differences in code : https://www.diffchecker.com/
Related
When I try to open the menu on mobile, it does not open and instead, you just select the whole menu bar. It looks like this on the actual website:
meanwhile, this is the relevant code for the navbar.php
<link href="assets/css/style.css" rel="stylesheet">
<nav class="navbar navbar-default">
<div class='container'>
<div class="navbar-header">
<button type="button" id='navbar-toggle' class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-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>
<div class="brand">
<img src="assets/img/transparentlogo.png" alt="logo">
</div>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-left">
<li>Home</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Contact Us</li>
</ul>
</div>
</div>
also, not sure if it makes a difference although the PHP file is named navbar.inc.php
Thank you for taking the time to read this post
<div class="brand">
<img src="assets/img/transparentlogo.png" alt="logo">
</div>
Maybe you should carry brand class' properties to anchor tag and remove brand class.
<a class="brand" href="../index"><img src="assets/img/transparentlogo.png" alt="logo"></a>
Or, you should check if your anchor tag () is covering all the space under the div having "brand" class. In my opinion you cannot click it on phone, because a' is not taking all the width and height.
I am created a navigation bar with bootstrap. I want to get the navigation menu item name with PHP code. I was trying to do that with 'GET' method but I cannot do that without changing the page. Here I attached the nav-bar code.
<body>
<!-- ======================== Navigation Bar ============================== -->
<section id="nav-bar">
<nav class="navbar navbar-expand-lg navbar-light static-top">
<div class="container-fluid p-0" id="navbarSupportedContent">
<a class="navbar-brand" href="#"><img src="../images/logo.png"/></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"
aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<div class="hori-selector"><div class="left"></div><div class="right"></div></div>
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</div>
</nav>
</section>
<?php
echo "Selected Item"; // display selected navigation item here.
?>
</body>
</html>
This is my index.php page body. I want to get the selected item name on the same index.php page. Please can anyone help me?
I used JavaScript and Ajax to solve this
I have the following bootstrap navbar. I want to include nav.php into all of my php pages. Well I have done simple includes in the past but with div tags something tells me I am doing this wrong.
<nav class="navbar navbar-fixed-top navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-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-brand" href="#"><img src="assets/img/logo.png" alt=" "></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<?php include 'nav.php';?>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
My nav.php is as following
echo'
<ul class="nav navbar-nav navbar-right">
<li>HOME</li>
<li>TEAM</li>
<li class="dropdown">
SERVICES <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>IT SERVICES</li>
<li>VOICE SERVICES</li>
</li>
</ul>
</li>
<li>CAREERS</li>
<li>INTERESTING INFORMATION</li>
<li>CONTACT</li>
</ul>';
Two possible paths:
Add <?php tag to your nav.php file,
or
remove echo statement and make the file plain HTML.
I need help creating a custom WordPress menu. WordPress Adds its own classes that I don't need. I need someone to help me solve this issue. WordPress doesn't add some attributes when I need them on drop-down.
Here is my HTML code.
<nav class="navbar navbar-default navbar-static-top">
<div class="container-fluid container">
<div class="row m04m">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main_nav">
<span class="bars">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</span>
<span class="btn-text">Select Page</span>
</button>
</div>
<div class="collapse navbar-collapse" id="main_nav">
<ul class="nav navbar-nav">
<li class="active ">Home</li>
<li class=" dropdown">
About
<ul class="dropdown-menu" role="menu">
<li>Company Profile</li>
<li>Board of directors</li>
<li>Owner's message</li>
<li>team</li>
</ul>
</li>
<li>
projects
</li>
<li class=" dropdown">
Media
<ul class="dropdown-menu" role="menu">
<li>Gallery</li>
<li>documents</li>
</ul>
</li>
<li class=" dropdown">
news
</li>
<li class=" dropdown">
contact
<ul class="dropdown-menu" role="menu">
<li>Conact us</li>
<li>Careers</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav> <!--Main Nav-->
What you are looking for is the Walker class in WordPress. It's built in and can help you create custom navigation amongst other things.
You can read more about it here: https://codex.wordpress.org/Class_Reference/Walker
A drop-down menu I created with Twitter Bootstrap works on HTML documents but will not drop down on PHP documents. Here is a PHP document where you can see see what I mean. When I click the "more" tab, it does not drop down.
Why doesn't this menu work on both HTML and PHP documents?
Here is the page source:
<body>
<div class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a href"" class="navbar-brand">Colorful Cards</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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">
<ul class="nav navbar-nav">
<li class="">Home</li>
<li class="">Past Cards</li>
<li class="active">Contact</li>
<li class="dropdown">
More<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li class="inverse-dropdown">Bibliography</li>
<li class="divider inverse-dropdown"></li>
<li class="inverse-dropdown">About</li>
<li class="divider inverse-dropdown"></li>
<li class="inverse-dropdown">Coming Soon...</li>
</ul>
</li>
</ul>
</div>
</div>
</div>