i would like to create a default template which contains all the layout stuff like head and body of the html page. But im cant get it to work. I searched for it, but all the solutions that had been used, dont work for me!
My Controller:
path("/", () -> {
get("", (req, res) -> {
return new ModelAndView(new HashMap<>(), "views/menu.vm");
}, velocityTemplateEngine);
});
main.vm:
#macro(mainLayout)
<html>
<head>
<script></script>
</head>
<body style="background-color: #2a2730">
<div class="content-container">
<p>$!bodyContent</p>
</div>
</body>
</html>
#end
menu.vm
##mainLayout()
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Kicker</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"
role="button" aria-haspopup="true" aria-expanded="false">Player <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Players list</li>
<li>New Player</li>
<li role="separator" class="divider"></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"
role="button" aria-haspopup="true" aria-expanded="false">Match <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Match list</li>
<li>New Match</li>
<li role="separator" class="divider"></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"
role="button" aria-haspopup="true" aria-expanded="false">Season <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Season list</li>
<li>New Season</li>
<li role="separator" class="divider"></li>
</ul>
</li>
<li>Dashboard</li>
<li>Statistics</li>
</ul>
</div>
</div>
</nav>
#end
For any help I would be very happy
Related
I'm trying to integrate a custom theme for bootstrap
the theme i want to use is bootswatch
the only problem i'm currently facing is that the dropdown menu in the navigation bar is not working.
this is my code.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/flatly/bootstrap.min.css" rel="stylesheet" integrity="sha384-+ENW/yibaokMnme+vBLnHMphUYxHs34h9lpdbSLuAwGkOKFRl4C34WkjazBtb7eT" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous">
</script>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
Bootswatch
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="navbar-main">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="themes">Themes <span class="caret"></span></a>
<ul class="dropdown-menu" aria-labelledby="themes">
<li>Default</li>
<li class="divider"></li>
<li>Cerulean</li>
<li>Cosmo</li>
<li>Cyborg</li>
<li>Darkly</li>
<li>Flatly</li>
<li>Journal</li>
<li>Lumen</li>
<li>Paper</li>
<li>Readable</li>
<li>Sandstone</li>
<li>Simplex</li>
<li>Slate</li>
<li>Spacelab</li>
<li>Superhero</li>
<li>United</li>
<li>Yeti</li>
</ul>
</li>
<li>
Help
</li>
<li>
Blog
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="download">Flatly <span class="caret"></span></a>
<ul class="dropdown-menu" aria-labelledby="download">
<li>Open Sandbox</li>
<li class="divider"></li>
<li>bootstrap.min.css</li>
<li>bootstrap.css</li>
<li class="divider"></li>
<li>variables.less</li>
<li>bootswatch.less</li>
<li class="divider"></li>
<li>_variables.scss</li>
<li>_bootswatch.scss</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Built With Bootstrap</li>
<li>WrapBootstrap</li>
</ul>
</div>
</div>
</div>
<html>
<head>
<title>Login</title>
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/flatly/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
Bootswatch
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar-main">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="navbar-main">
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="themes">Themes <span class="caret"></span></a>
<ul class="dropdown-menu" aria-labelledby="themes">
<li>Default</li>
<li class="divider"></li>
<li>Cerulean</li>
<li>Cosmo</li>
<li>Cyborg</li>
<li>Darkly</li>
<li>Flatly</li>
<li>Journal</li>
<li>Lumen</li>
<li>Paper</li>
<li>Readable</li>
<li>Sandstone</li>
<li>Simplex</li>
<li>Slate</li>
<li>Spacelab</li>
<li>Superhero</li>
<li>United</li>
<li>Yeti</li>
</ul>
</li>
<li>
Help
</li>
<li>
Blog
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" id="download">Flatly <span class="caret"></span></a>
<ul class="dropdown-menu" aria-labelledby="download">
<li>Open Sandbox</li>
<li class="divider"></li>
<li>bootstrap.min.css</li>
<li>bootstrap.css</li>
<li class="divider"></li>
<li>variables.less</li>
<li>bootswatch.less</li>
<li class="divider"></li>
<li>_variables.scss</li>
<li>_bootswatch.scss</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Built With Bootstrap</li>
<li>WrapBootstrap</li>
</ul>
</div>
</div>
</div>
</body>
</html>
I use bootstrap 4.3.1 instead of 3.3.7 to fix this problem.
https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js
Maybe you can try it.
I'm creating a webpage and let's say I've got this navbar: (Courtesy TutorialsPoint)
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#example-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>
<a class="navbar-brand" href="#">TutorialsPoint</a>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">iOS</li>
<li>SVN</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Java <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>jmeter</li>
<li>EJB</li>
<li>Jasper Report</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div>
</nav>
This creates borders like this:
codepen.io/aravind-forever/pen/WGQXzL
I want to remove the borders from both the button and the nav. How do I do this? I've tried border: none but that does not work.
Merci d'avance!
Note sure why you're having difficulty...
.navbar.navbar-default, .navbar button.navbar-toggle { border: none; }
See it in a fiddle here: FIDDLE
.navbar.navbar-default, .navbar button.navbar-toggle { border: none; }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<div style="height: 40px;" title="just to move it down a little in snippet"></div>
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#example-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>
<a class="navbar-brand" href="#">TutorialsPoint</a>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">iOS</li>
<li>SVN</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Java <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>jmeter</li>
<li>EJB</li>
<li>Jasper Report</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div>
</nav>
Lets keep it simple.
For nav, You can use:
.navbar-default{
border:0px;
}
For button, You can use:
.navbar-default .navbar-toggle{
border:0px;
}
Or just copy the code below to your CSS file:
.navbar-default, .navbar-default .navbar-toggle{
border:0px;
}
If nothing works, Try adding !important at the of 0px
you may call your style sheets in wrong order,
You can inline styling [ style="border: none;" ] for nav element and button element as beloved.
<nav class="navbar navbar-default" role="navigation" style="border: none;">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#example-navbar-collapse" style="border: none;">
<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="#">TutorialsPoint</a>
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">iOS</li>
<li>SVN</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Java <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>jmeter</li>
<li>EJB</li>
<li>Jasper Report</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div>
</nav>
I am using bootstrap 3 with the standard css shipped with the package.
I have built a menu out of the basic structure provided in the examples and built this HTML:
<nav class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<!--<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="index.php"><img src="images/logo_small.png" alt="Montglane"></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li class="active voce">Home</li>
<li class="dropdown voce" id="movimenti">
Movimenti <span class="caret"></span>
<ul class="dropdown-menu">
<li>Banca</li>
<li>Carta di credito</li>
<li>Timesheet</li>
<!--<li>Something else here</li>-->
<!--
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
-->
</ul>
</li>
<li class="dropdown voce" id="report">
Report <span class="caret"></span>
<ul class="dropdown-menu">
<li>Banca</li>
<li>Carta di credito</li>
<li>Geco</li>
<li>Fatture</li>
</ul>
</li>
<li class="dropdown voce" id="anagrafiche">
Anagrafiche <span class="caret"></span>
<ul class="dropdown-menu">
<li>Banche</li>
<li>Carte</li>
<li>Clienti</li>
<li>Commesse</li>
<li>Tipi Movimenti</li>
</ul>
</li>
</ul>
<!--<ul class="nav navbar-nav navbar-right">
<li></li>
</ul> -->
<p class="navbar-text navbar-right"><?php echo $_SESSION['nome_est']; ?></p>
</div><!--/.nav-collapse -->
</div>
</nav>
It works but when it comes to small viewports it stopped showing the hamburger. I have inspected the code and the menu options are there to be shown but I miss the three lines button to toggle menu visibility. What kind of mistake did I do?
Note that I didn't apply any custom css or js by now.
Now as answer ;)
You commented the HTML section of the button. See line 4 to 10. Button including 3 spans icon-bar.
you have commented hamburger menu section
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="index.php"><img src="images/logo_small.png" alt="Montglane"></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li class="active voce">Home</li>
<li class="dropdown voce" id="movimenti">
Movimenti <span class="caret"></span>
<ul class="dropdown-menu">
<li>Banca</li>
<li>Carta di credito</li>
<li>Timesheet</li>
<!--<li>Something else here</li>-->
<!--
<li role="separator" class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
-->
</ul>
</li>
<li class="dropdown voce" id="report">
Report <span class="caret"></span>
<ul class="dropdown-menu">
<li>Banca</li>
<li>Carta di credito</li>
<li>Geco</li>
<li>Fatture</li>
</ul>
</li>
<li class="dropdown voce" id="anagrafiche">
Anagrafiche <span class="caret"></span>
<ul class="dropdown-menu">
<li>Banche</li>
<li>Carte</li>
<li>Clienti</li>
<li>Commesse</li>
<li>Tipi Movimenti</li>
</ul>
</li>
</ul>
<!--<ul class="nav navbar-nav navbar-right">
<li></li>
</ul> -->
<p class="navbar-text navbar-right"><?php echo $_SESSION['nome_est']; ?></p>
</div><!--/.nav-collapse -->
</div>
</nav>
So I have this segment of code which is due for part of my assignment, the aim is to make a functional index page, but I have written this code but cannot find at what point the Menu key refuses to activate the dropdown list. I've tried it on Chrome/Firefox and have issues with both but I cannot find exactly where it is breaking.
Guidance would be much appreciated.
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Ristorante Con Fusion</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><span class="glyphicon glyphicon-home" aria-hidden="true"></span> Home
</li>
<li>About
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
Menu <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Appetizers
</li>
<li>Main Courses
</li>
<li>Desserts
</li>
<li>Drinks
</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Specials</li>
<li>Lunch Buffet
</li>
<li>Weekend Brunch
</li>
</ul>
</li>
<li>Contact
</li>
</ul>
</div>
</div>
</nav>
Make sure you have included all of Bootstrap's javascript files :
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
Add the external files. Details are in the Snippet
SNIPPET
/* Changes
line 1
|| Added external link to Bootstrap.css file
=======================
line 47
|| Added external jQuery script file
=======================
line 49
|| Added external Bootstrap.js script file
*/
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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="#">Ristorante Con Fusion</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><span class="glyphicon glyphicon-home" aria-hidden="true"></span> Home
</li>
<li>About
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
Menu <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Appetizers
</li>
<li>Main Courses
</li>
<li>Desserts
</li>
<li>Drinks
</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Specials</li>
<li>Lunch Buffet
</li>
<li>Weekend Brunch
</li>
</ul>
</li>
<li>Contact
</li>
</ul>
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
I'm working on my first bootstrap project, I'm having some difficulty making changes to the navbar, I've spent a few hours researching but I keep coming up blank on one item in particular. When clicked the list item that is circled in the below image turns the standard bootstrap grey, I want it to match the background color, black.
And while I'm asking I would also like to change the color on the dropdown as well.
Here is my markup :
<nav role="navigation" class="navbar navbar-default navbar-fixed-top navbar-custom">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle btn-lg">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">
<img alt="brand" class="image-responsive" src="traclogo.png" height="140px" width="260px"></img>
</a>
</div>
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Products<b class="caret"></b></a>
<ul role="menu" class="dropdown-menu">
<li>Suspension Kits</li>
<li>Light Bar Mounts</li>
<li>Custom Fabrication</li>
</ul>
</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Builds<b class="caret"></b></a>
<ul role="menu" class="dropdown-menu">
<li>Tacoma</li>
<li>Bronco</li>
<li>Hot Rods</li>
<li>Everything Else</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
</div>
</div>
</nav>
You would want to change the tab color on focus. The dropdown style is controlled .dropdown-menu class and its descendent classes.
.navbar-default .navbar-nav > .open > a:focus {
background: #000 !important; /* Avoid !important, added for the sake of SO snippet priority */
color: #fff !important;
}
.dropdown-menu {
background: lightblue !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav role="navigation" class="navbar navbar-default navbar-fixed-top navbar-custom">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle btn-lg">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">
<img alt="brand" class="image-responsive" src="traclogo.png" height="140px" width="260px">
</a>
</div>
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home
</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Products<b class="caret"></b></a>
<ul role="menu" class="dropdown-menu">
<li>Suspension Kits
</li>
<li>Light Bar Mounts
</li>
<li>Custom Fabrication
</li>
</ul>
</li>
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">Builds<b class="caret"></b></a>
<ul role="menu" class="dropdown-menu">
<li>Tacoma
</li>
<li>Bronco
</li>
<li>Hot Rods
</li>
<li>Everything Else
</li>
</ul>
</li>
<li>Contact Us
</li>
</ul>
</div>
</div>
</nav>