li href with '#' works fine but I'd like to write url of the another page. I tried to add some divs, forms or btn from bootstrap but that solution makes my page messy(unexpected margins or something strange).
I have no idea how to solve the problem.
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- 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="#menu">
<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="wow fadeInRight" data-wow-duration="2s">
<a class="navbar-brand" href="#home"></a>
</div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="menu">
<ul class="nav navbar-nav navbar-right">
<!-- Sklep -->
<li>Sklep
</li>
<!-- SOCIAL -->
<li style="padding-top:9px; margin-left:50px;">
<a href="https://www.facebook.com" target="blank" style="padding:0 5px; margin-top:auto;margin-bottom:auto;" class="social">
<img src="img/ikony/facebook-2-32.png" alt="">
</a>
<a href="https://www.youtube.com" target="blank" style="padding:0 5px; margin-top:auto;margin-bottom:auto;" class="social">
<img src="img/ikony/youtube-2-32.png" alt="">
</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
I don't completely understand your question, however when I have formatting issues with href tags, I tend to use JavaScript:
<div onclick="http://ebay.com" />
Perhaps if you explain your question a little better I may be able to help.
Related
I have made a header prototype using bootstrap. The problem is I couldn't understand why I have such big padding for the right side. If I add one more letter after Корзина HTML gives me a new line. How could I get rid of this free space? Here is the image
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<!-- Navigation -->
<!-- Heading beginning -->
<div class="container">
<div class="jumbotron">
<div class="row">
<div class="col-md-2"><img src="http://placehold.it/75x75" id="nttLogo"></div>
<div class="col-md-8">
<input type="text" name="searchPattern" placeholder="Введите название лекарства, или препарата" id="searchForm">
<button type="button">Search</button>
<span class="glyphicon glyphicon-heart-empty"><p id="websiteSlogan">Отложенное </p></span>
<span class="glyphicon glyphicon-folder-open"><p id="websiteSlogan">Корзина</p></span>
</div>
<div class="col-md-8">
<small>Например, лекарства для диабетиков</small>
</div>
</div>
<nav class="navbar navbar-inverse" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" 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="#">Start Bootstrap</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
</div>
</div>
<!-- Heading end-->
</body>
You need to increase the col-md-8 to col-md-10 and float the elements to right to remove empty space from right.
here is the updated demo
I hope you all are fine. I am new here, and I have a question. I am working with mvc , with c#, html, css and boostrap.
I am trying to develop a responsive nav bar. It contains icons for each menu item. For example, home (a house icon with words under it), item 2, item 3 and so on.
when displaying the nav bar in movile devices ( small screens) the icons in the hamburguer menu continue to be displayed as big as used to be in the computer´s version.
I would like to adapt the icnons sizes(the brand logo and the items) in the nav bar for each screen size..here you are the code:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="brand">
<img class="img-responsive" src="http://Brandlogo.com/brandlogo.png alt="">
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<a href="#Url.Action("action1", "item1")">
<img class="img-responsive" src="/images/item1.png" alt="imagen"> item1
</a>
</li>
<li>
<a href="#cont-4">
<img class="img-responsive " src="/images/item2.png " alt="imagen">item2
</a>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
thank you for your help
You should check out media queries
It enables you to change certain css styles based on screen size.
Having a problem regarding bootstrap navbar.
I am placing the navbar code in every page or should I place the navbar code in a single file and access it in all pages?
Your question actually does not a question about bootstrap.
Since you are using the bootstrap, you must be using jQuery. You can use load() which is a function of ajax to do this.
You can get the detail of the API here .load() | jQuery API Documentation
The question is really not clear, but if you are asking if you should use the navbar and a dynamic site or just put the navbar in every page, the answer is w/e you want to do is okey, both are valid choices.
Examples:
<!-- Preloader -->
<div class="page-preloader preloader-wrapp">
<img src="assets/images/snr-logo.png" alt="">
<div class="preloader"></div>
</div>
<!-- /Preloader -->
<!-- Navbar -->
<nav class="navbar-youplay navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed"
data-toggle="off-canvas" 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="#/"> <img
src="assets/images/batman.jpg" alt="flogo">
</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="home"><a href="#/"> <span
class="glyphicon glyphicon-home"></span> <strong>Home</strong><span
class="label">--->Inicio</span></a></li>
<li class="av navbar-nav"><a href="#/turno/portada"
class="dropdown-toggle" role="button" aria-expanded="false"> <strong>Sacar Turno</strong>
<span class="label">Más información</span>
</a></li>
<li class="av navbar-nav"><a href="#/turno/mod"
class="dropdown-toggle" role="button" aria-expanded="false"> <strong>Modificar un Turno</strong>
<span class="label">Más información</span>
</a></li>
<li class="av navbar-nav"><a href="#/horario"
class="dropdown-toggle" role="button" aria-expanded="false"> <strong>Horario</strong>
<span class="label">Más información</span>
</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#/login"><span class="glyphicon glyphicon-log-in"></span>
Iniciar</a></li>
</ul>
</div>
</div>
</nav>
<!-- /Navbar -->
<!-- Separation -->
<br>
<br>
<br>
<br>
<br>
<!-- /Separation -->
<!-- Main Dynamic Body -->
<div data-ng-view class="container"></div>
<!-- /Main Dynamic Body -->
<!-- Footer -->
<footer>
<p>
Informatica y Comunicaciones SNR © 2015-2016.
</footer>
<!-- /Footer -->
<!-- Loader -->
<script type="text/javascript" src="scripts/services/loader.js"></script>
<!-- init loader -->
<script>
if (typeof youplay !== 'undefined') {
youplay.init({
smoothscroll : false,
});
}
</script>
<script type="text/javascript">
$(".countdown").each(function() {
$(this).countdown($(this).attr('data-end'), function(event) {
$(this).text(event.strftime('%D days %H:%M:%S'));
});
})
</script>
##
I'm using AngularJs and a single Navbar with a container for showing all the data.
Hope it helps.
I want to create a twin navbar (two rows) with Bootstrap.
The navbar template doesn't really meet my design goals, which look something like:
(this demo)
+-------------+--------------------------------+
| title | | this part does not collapse
+-------------+--------------------------------+
| two-line | two-line | | on smaller screens,
| button | button | | collapses to 'hamburger' menu
+----------------------------------------------+
I am having difficulty collapsing the 2nd row into the hamburger menu.
My code is: (did this manually to achieve look as above)
<table>
<tr>
(1 cell for title, 1 cell for rest of row)
</tr>
<tr class="nav2">
<td style="width:100%;" colspan="2">
<table style="width:600px;">
<tr>
<td style="width:100%;">
<div class="container-fluid">
<div class="row">
<a href="#"><div class="col-xs-3">
<span class="link">Heatmap</span>
</div></a>
<a href="#"><div class="col-xs-3">
<span class="link">Basic<br>Reports</span>
</div></a>
<a href="#"><div class="col-xs-3">
<span class="link">Group-aware<br>Reports</span>
</div></a>
<a href="#"><div class="col-xs-3">
<span class="link">Auto Group<br>Identification</span>
</div></a>
</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
(...)
I would replace that whole container-fluid with a navbar, but then I wouldn't be able to achieve the design as linked in: (demo). I tried adjusting the CSS parameters, but wasn't able to get the look and precise measurements.
Any way to make the 2nd row collapsible on mobile, manually or otherwise, while preserving the design?
Here's a slightly different idea. I like Macsupport's second navbar from your original design, but the toggle button on a second row on a mobile device doesn't make a lot of sense to me. Especially on mobile where space is limited. Having a hamburger button on the far right doesn't really detract from the logo at all.
Here's a pretty standard navbar example, except I've added the class .twoRow
<div class="navbar navbar-inverse twoRow">
<div class="container">
<!-- Header -->
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse"
data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
Bootstrap 3 Skeleton
</a>
</div>
<!-- Navbar Links -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
For the CSS, on a widescreen device, just clear the .navbar-collapse float so it creates a new line:
#media (min-width: 768px) {
.twoRow .navbar-collapse {
clear: left;
}
}
Working Demo in jsFiddle
Which will look like this:
Here is a rough example:
/* CSS */
.nav2 {
margin-top: 50px;
}
<!-- HTML -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<a class="navbar-brand" href="#">Brand</a>
</div>
</nav>
<nav class="navbar navbar-inverse nav2" role="navigation">
<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>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
Here is the code for navbar
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<!-- Be sure to leave the brand out there if you want it shown -->
<a class="brand" href="index.html">EasyUniv</a>
<!-- Everything you want hidden at 940px or less, place within here -->
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">
Home
</li>
<li>Services</li>
<li>Campus</li>
<li>Advertise</li>
</ul>
</div>
</div>
</div>
</div>
The example is at: www.easyuniv.com/staging
when you make the screen smaller it hides the nav buttons correctly but they do not go into the little drop down like it should. also at certain widths there is weird padding.. been trying different things and can't get these to work.
Thanks
You need to include jQuery before bootstrap.