This code was working yesterday and now it has suddenly stopped working, I haven't made any alterations to any of my html pages including this one. I am using flask bootstrap but my navbar is working fine and the border that comes up with "list-group-item" is there, it's just the colours that are missing from "list-group-item-success/info/warning".
<div class="col-md-8">
<ul class="list-group">
<a href="{{ url_for('listings.make_bst_listing') }}">
<li class="list-group-item list-group-item-success">
<h4><b>Buy Sell Trade</b> </h4>
<p>Post a listing for an item that you want to buy and/or sell and/or trade</p>
</li>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!--This code was working yesterday and now it has suddenly stopped working, I haven't made any alterations to any of my html pages including this one. I am using flask bootstrap but my navbar is working fine and the border that comes up with "list-group-item" is there, it's just the colours that are missing from "list-group-item-success/info/warning".-->
<div class="col-md-8">
<ul class="list-group">
<li class="list-group-item list-group-item-danger">
<a href="{{ url_for('listings.make_bst_listing') }}">
<h4><b>Buy Sell Trade</b> </h4>
<p>Post a listing for an item that you want to buy and/or sell and/or trade</p>
</a>
</li>
</ul>
</div>
This is working for me...however the html was rearranged so that the Anchor tag is inside of the LI tag. An anchor can't be inside of a UL tag as posted in question.
Related
I would like to make a profile menu like in Gmail what contains the user's display name and his user name and also two buttons with settings and logout. I would like to make it in angular 8.
http://prntscr.com/q1vd8y
<li>
<!-- user profile -->
<div class="profile">
<img class="avatar" src="" /><span></span>
<!-- more menu -->
<ul class="menu">
<li class="name">{{name}}</li>
<li class="name">{{useremail}}</li>
<li class="name">{{visiblename}}</li>
<li>Settings</li>
<li><a [routerLink]='["/logout"]'>Log out</a></li>
</ul>
</div>
</li>
</ul>
https://material.io/design/
here it is, my friend, the one and only, Material Design !
you can find css frameworks that will help you do it like
https://materializecss.com/
for example !
https://material.angular.io/ for angular
When I click the burger menu on a small screen nothing happens. Of course, it works fine on a large screen. I have tried several "navbar" configurations. The included code at least compiles. I had a target defined : class="navbar-burger is active" data-target="navbar-menu" and an id for class="navbar-menu" id = "navbar-menu"
What am I missing?
<!-- logo -->
<div class="navbar-brand is-large">
<a class="navbar-item" href="#">
<img src="assets/img/Grayscale_cloud.png">
</a>
<div class="navbar-burger is active" data-target="navbar-menu">
<span></span>
<span></span>
<span></span>
</div>
</div>
<!-- menu -->
<div class="navbar-menu" id = "navbar-menu">
<div class="navbar-start">
<a class="navbar-item" routerLink="">Home</a>
<a class="navbar-item" routerLink="contact">Contact</a>
<a class="navbar-item" routerLink="networksupport">Network</a>
<a class="navbar-item" routerLink="managemnentreports">Management Reports</a>
</div>
</div>
</nav>
`,
I tried the code here to no avail. https://medium.com/#edigleyssonsilva/bulma-css-framework-with-angular-6-responsive-menu-and-navbar-burger-dff747ed2dc1
Several good examples here but I could not make them work with Bulma and Angular: I'm trying to use hamburger menu on bulma css, but it doesn't work. What is wrong?
Routing works as expected on a large browser. Burger menu appears on small screen but no appears when you press it.
there are a few things which might cause this for you - since you didn't paste a MCV example, i'll list them all
you didn't paste your toggle function for showing main-nav or burger nav... this is the toggle function (in app.component.ts) from the medium article link which you pasted
toggleNavbar() { this.navBurger.nativeElement.classList.toggle('is-active'); this.navMenu.nativeElement.classList.toggle('is-active'); }
to get this toggle function to work, you'd have to assign the names in app.component.html
you had <div class="navbar-menu" id = "navbar-menu"> ... which should have <div class="navbar-menu" id = "navbar-menu" #navMen>
and <a class="navbar-item" href="#"> .... </a> ...which should have
<a (click)="toggleNavbar()" role="button" #navBurger data-target="navbar-menu"> ... </a>
Also, we had to do npm install bulma
add the css in our angular.json:
"styles": ["node_modules/bulma/css/bulma.min.css" ],
you can check a working sample here
I'm creating a theme with Wordpress and Bootstrap and have included their 'dropdown' for a filtering element on the page. It works fine in all browsers, including when I scale them down to mobile size. But, when I visit the site from an iPhone or iPad the dropdown doesn't drop down, so to speak.
This is the markup that I have:
<div class="col-md-4 col-sm-6">
<div class="bdo-employee-filter dropdown">
<div class="dropdown-toggle filter-button" type="button" data-toggle="dropdown">
<div class="text">Filtrera</div>
<div class="arrow"></div>
</div>
<ul class="dropdown-menu" role="menu">
<li>Rensa filtrering</li>
<li>IT</li>
<li>Office of World Reign</li>
</ul>
</div>
</div>
I have tried following Bootstrap's example and can't really see what could be wrong. Nothing happens at all when I try to open the dropdown from an iphone or ipad. On the same page I use their navbar dropdown, and that works fine on all devices.
I've checked my javascript files and I think I have all the right ones. But I am not getting anything to dropdown.
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"></script>
...
<div class="span3"><center>
Buy A Contract
<ul class="dropdown-menu">
<li>Hello World</li>
<li>Why am I not seeing this?</li>
</ul>
</div>
</center>
</div>
...
Looks like one obvious issue: no jQuery reference. Also, since you included this:
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>
you don't need to reference bootstrap-dropdown.js (the min file contains all the plugins).
EDIT:
To be clear, you need to have a script tag pointing to a copy of the jQuery library somewhere before the Bootstrap references, so your head should look similar to:
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>
You might need to back the jQuery version down, since you're linking to an older version of Bootstrap. If you're getting errors from the Bootstrap source, change the jQuery version to 1.8.3.
Jquery is important to be declared before every other script on your page.
In header insert the below line before every script.:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
But you also have the wrong syntax to create a dropdown menu . It has to be like below:
<ul class="nav">
<li>Link</li>
<li>Link</li>
<li class="dropdown"> <!-- this is the item where your dropdown menu will popup-->
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu"><!-- your drop-down -menu-->
<li>nav1
</li>
<li>nav2
</li>
</ul><!-- dropdown menu ends-->
</li><!-- li with dropdown ends-->
</ul><!-- Main nav ends-->
I'm creating my own wordpress template and I've coded a jQuery drop down menu that works statically but now I'm trying to make it dynamic the css is messed up. The drop down works but the menu doesn't displaying correctly.
The main menu displays vertical instead of horizontal and the secondary menu is horizontal, instead of vertical. Also the orange type for the main menu isn't displaying.
Here's a working static version
I hope I'm explaining myself thoroughly, if you need any more info please let me know.
Here is my wordpress template code
<div class="box">
<ul id="ldd_menu" class="ldd_menu">
<li>
<span>Menu</span>
<!-- Increases to 510px in width-->
<div class="sub_wrap">
<div class="ldd_submenu">
<nav>
<li class="ldd_heading"></li>
<?php wp_nav_menu(array('menu' => 'main_nav')); ?>
</nav>
<a class="ldd_subfoot" href="#"> Accessibility Link</a>
</div>
</li>
</ul>
</div>
<div></div>
I would suspect your code is not handling the output format of the wp_nav_menu method. Now I am not sure of your exact version, but newer versions will out put like this. So you will get extra div added in that you might not expect and the way the child menus are output may not be what you expect. Also, as the previous people said your code is not quite right, missing some tags.
<div class="menu-id-container">
<ul class="nav-menu" id="menu-id">
<li class="..." id="..">LINK
<ul class="sub-menu">
<li>Child LINK1</li>
</ul>
</li>
<li class="..." id="...">LINK2</li>
</ul>
</div>