I'm using Bootstrap 4 to build my personal website. I'm CDN Bootstrap and FontAwesome. All of the icons are showing in the page but are not clickable. The code in my <head> is as follow...
<head>
<meta charset="UTF-8">
<!--Bootstrap CSS-->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="
{{site.baseurl}}/css/main.css">
<title>Gilberto Diaz</title>
</head>
The structure of the navbar is as follow...
<!--Navbar Image & Social Icons-->
<nav class="navbar navbar-toggleable-sm navbar-light bg-faded">
<a class="navbar-brand" href="{{site.baseurl}}"><img class="img-fluid" src="{{site.baseurl}}/images/profile_img_bw.png"
alt="Gilberto Diaz Profile Picture"></a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="brand-text" href="{{site.baseurl}}">Gilberto Diaz <span class="sr-only">(current)</span></a>
</li>
</ul>
<a class="nav-link" href="mailto:{{site.author.email}}?subject=feedback" title="Email me">
<i class="fa fa-envelope"></i>
</a>
<a class="nav-link" href="https://twitter.com/{{ site.twitter_username }}" title="Twitter">
<i class="fa fa-twitter-square"></i>
</a>
<a class="nav-link" href="https://www.linkedin.com/in/{{ site.linkedin_username }}" title="LinkedIn"><i class="fa fa-linkedin-square"></i></a>
</div>
</nav>
<!--End of Navbar Image & Social Icons-->
_config.yml is as follow...
twitter_username: diazgilberto
github_username: diazgilberto
google_plus_username: +GilbertDiazCasanas
linkedin_username: diazgilberto
Two things:
When I hover cursor should change automatically with anchor tags in bootstrap and is not doing that.
Nothing happens when you click in the social icon
Related
Navbar Toggle is not working with Bootstrap 5.2. The hamburger button shows correctly when screen is small but when I click on button the nav items don't appare. Any suggestion?
`
<body>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<div class="container-fluid">
Tech Blog
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Download</a>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js"/>
</body>
`
`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<div class="container-fluid">
Tech Blog
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Download</a>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</body>
</html>
just change script to this
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
The examples on the Bootstrap 5 site only show non-LI nav items aligned to the right.
I have 4 menu items, 3 should be left aligned while the last should be pushed to the right.
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#">Features</a>
<a class="nav-link" href="#">Pricing</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</div>
</div>
</div>
</nav>
You could achieve this with the classes .me-auto on the left div or .ms-auto on the right div. This adds a margin between the two different navigation elements. Here a short demo, but you can see some other examples with a searchbar in the navbar-documentation.
Changed navbar-expand-lg to just navbar-expand so the example is easily visible without needing to go fullpage.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap navbar demo</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<!-- div class="navbar-nav"> -->
<!-- use me-auto here... -->
<div class="navbar-nav me-auto">
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#">Features</a>
<a class="nav-link" href="#">Pricing</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</div>
<!-- ...or use ms-auto here -->
<!-- <div class="navbar-nav ms-auto"> -->
<div class="navbar-nav">
<a class="nav-link" href="#">Settings</a>
<a class="nav-link" href="#">Account</a>
<a class="nav-link" href="#"><span class="btn btn-outline-danger btn-sm">Logout</span></a>
</div>
</div>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
</body>
</html>
Note that these changes would not have any visual effect on the mobile version of the navigation. Also, if you are using e.g. divs or lists (ul/ol) for the navigation will not make any visual difference with bootstrap. However, it could make an impact in SEO and accessability.
I'm in the process of learning JS and have made a collapsable navbar. I got the menu to
open upon clicking the button, but it will not close. I've searched this site for
answers but anything I've found refers to Bootstrap. This is just pure JS. I've also
looked over my code for hours trying to spot a syntax error or anything that could be
going wrong. Any help would be greatly appreciated!
I am working on the latest version of bootstrap which 5.1 and facing this problem.
I am not able to resolve this. Navbar toggler is not closing after opening.
Here is my code:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
<title>Hello, world!</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark ">
<a class="navbar-brand" href="#">tindog</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo01">
<ul class="navbar-nav ms-auto ">
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Download</a>
</li>
</ul>
</div>
</nav>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
</body>
</html>
Help me regarding this issue.
I have included js bootstrap already.
Solution -
comment out Separate Popper and Bootstrap JS
Navbar code structure modified as per bootstrap site
Ref URLs -
https://getbootstrap.com/docs/5.1/components/navbar/#external-content
https://getbootstrap.com/docs/5.1/getting-started/introduction/
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
<title>Hello, world!</title>
</head>
<body>
<nav class="navbar navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">tindog</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01"
aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
<div class="collapse" id="navbarTogglerDemo01">
<ul class="bg-dark p-4">
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Download</a>
</li>
</ul>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!-- <script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js"
integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js"
integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
crossorigin="anonymous"></script> -->
</body>
</html>
<!doctype html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
<title>Hello, world!</title>
</head>
<body>
<nav class="navbar navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">tindog</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo01"
aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
<div class="collapse" id="navbarTogglerDemo01">
<ul class="bg-dark p-4">
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Download</a>
</li>
</ul>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!-- <script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js"
integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js"
integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
crossorigin="anonymous"></script> -->
</body>
</html>
you must remove bootstrap bundle library,then run again
I am new to semantic-ui and I am having trouble creating an html link for a menu item, below is my test code:
<div class="ui blue borderless main menu">
<a href="#" class="blue item" data-vivaldi-spatnav-clickable="1">
Home
</a>
<a href="#" class="ui floated dropdown item" data-vivaldi-spatnav-clickable="1">
Products
<i class="dropdown icon"></i>
<div class="menu">
<a class="item" href="http://www.google.com">Google</a>
<a class="item" href="http://www.zdnet.com">Zdnet</a>
</div>
</a>
What I get displayed is:
Home Products> Google Zdnet
What I want is Google and Zdnet to be displayed as items of Products:
Home |Products|
|Google |
|Zdnet |
Can anybody tell me what I need to do to my code to achieve this?
Thanks
Make sure you included jQuery and semantic.min.js libraries in <head> section (jQuery first!).
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.js"></script>
</head>
<body>
<div class="ui blue borderless main menu">
Home
<div class="ui dropdown item" data-vivaldi-spatnav-clickable="1">
Products
<i class="dropdown icon"></i>
<div class="menu">
<a class="item" href="http://www.google.com">Google</a>
<a class="item" href="http://www.zdnet.com">Zdnet</a>
</div>
</div>
</div>
<script>
$('.ui.dropdown').dropdown();
</script>
</body>
</html>
I am developing a tizen web application using html, js, tau and jquery.
I need a context menu when user click on a specific position.
Is it possible to do that ?
I tried,
$("#myContextMenu").popup('open');
it shows
TypeError: $(...).popupwindow is not a function
Any help will be appreciated.
You need to add TAU library. TAU has different types of Context menu.
Try like this,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="./lib/tau/mobile/theme/default/tau.css">
<meta name="description" content="Tizen Mobile Application"/>
<title>Hello Tizen</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script src="js/main.js"></script>
<script type="text/javascript" src="./lib/tau/mobile/js/tau.js"></script>
</head>
<body>
<div class="ui-page" id="list-styles-page">
<div class="ui-header" data-position="fixed">
<h1>Home</h1>
</div>
<div class="ui-content">
<ul class="ui-listview">
<li class="ui-group-index">Horizontal Style</li>
<li class="ui-li-anchor">Horizontal Basic</li>
<li class="ui-li-anchor">Horizontal Scroll</li>
<li class="ui-li-anchor">Horizontal 2line</li>
<li class="ui-group-index">Vertical Style</li>
<li class="ui-li-anchor">Vertical Basic</li>
</ul>
<div id="ctxpopup_horizontal_basic" class="horizontal-ctxpopup ui-popup" data-overlay="false">
<ul class="ui-listview">
<li class="ui-li-anchor">Copy</li>
<li class="ui-li-anchor">Cut</li>
<li class="ui-li-anchor">Paste</li>
</ul>
</div>
<div id="ctxpopup_horizontal_scroll" class="horizontal-ctxpopup ui-popup" data-overlay="false">
<ul class="ui-listview">
<li class="ui-li-anchor">Copy</li>
<li class="ui-li-anchor">Cut</li>
<li class="ui-li-anchor">Paste</li>
<li class="ui-li-anchor">Clipboard</li>
<li class="ui-li-anchor">Close</li>
</ul>
</div>
<div id="ctxpopup_horizontal_2line" class="horizontal-ctxpopup ui-popup" data-overlay="false">
<ul class="ui-listview">
<li class="ui-li-anchor">Select All</li>
<li class="ui-li-anchor">Cut</li>
<li class="ui-li-anchor">Copy</li>
<li class="ui-li-anchor">Paste</li>
</ul>
<ul class="ui-listview">
<li class="ui-li-anchor">Clipboard</li>
<li class="ui-li-anchor">Dictionary</li>
<li class="ui-li-anchor">Translate</li>
<li class="ui-li-anchor">Share via</li>
</ul>
</div>
<div id="ctxpopup_vertical_basic" class="ui-popup" data-overlay="false">
<ul class="ui-listview">
<li class="ui-li-anchor">Copy</li>
<li class="ui-li-anchor">Cut</li>
<li class="ui-li-anchor">Paste</li>
<li class="ui-li-anchor">Clipboard</li>
</ul>
</div>
</div>
</div>
</html>
here is a demo of vertical style (basic)
Please see Tizen Online Sample 'TAUUIComponents' for TAU examples