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.
Related
I'm running this ResearchSpace (RS) instance: https://www.magnetic-margins.com
In the header.hbs file, all seems to be set for a use of the navbar on mobile devices, but the dropdown won't work because the collapse event is not triggered, I think. I can make it permanently collapsed for mobiles but I fail to make the actual dropdown work!
RS is using React Bootstrap 3. The corresponding lines in the header.hbs file are:
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="rs-header">
<!-- 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="#rs-navbar"
aria-expanded="false" aria-controls="rs-navbar" aria-label="Toggle navigation">
<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="rs-header-logo" href="/" title="{{deploymentTitle}}"><img class="img-responsive" src="https://docs.google.com/drawings/d/e/2PACX-1vRKgdbvCgd7aA4xA3nCR21qrQpFvD6ryeqhLHJ2z15oDVb8lBMVLyPgOwRAiJxpUMVPK7HUvcogCVW9/pub?h=70"/></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="rs-navbar">
<ul class="nav navbar-nav">
{{!-- <li>
<semantic-link iri="http://www.researchspace.org/resource/ThinkingFrames"
urlqueryparam-view='system-projects' class="rs-body-m-B" style="padding-left: 60px;">
Projects
</semantic-link>
</li> --}}
</ul>
<ul class="nav navbar-nav icon-btns-container">
<li>
<semantic-link uri="http://www.researchspace.org/resource/magnet_Persons">
<div class="nav-iconAndLabel">
<i class="fa fa-users"></i>
<div>Persons</div>
</div>
</semantic-link>
</li>
...
This bug seems to apply to all RS instances I checked, but, e.g., works on a Metaphacts implementation of http://db.sphaera.mpiwg-berlin.mpg.de/resource/Start
I'm creating template using Bootstrap v3.3.6.
Here's the part of my template:
As you can see I have navbar fixed at the top and I also have menu items that are icons or simply images embedded between <li></li> tags, user info icon and gear icon.
What I don't know for sure is if I'm doing it correctly, I mean is there a special class in bootstrap that is specifically for menu items where you want to insert image. Maybe those images are not supposed to be there.
Another question would be if I should place my logo image inside <a class="navbar-brand"></a>? If I try to insert bigger logo image in height than navbar height then logo image isn't properly centered. What is the easiest way to properly change navbar height and how to center images vertically in navbar?
(Maybe that's too much code, but I wanna make sure that my question isn't lacking anything) only part where two images are inserted as navigation items are relevant
<nav class="navbar navbar-default navbar-fixed-top" 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="#">Workout.lt</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 navbar-right">
<li>
Vardenis Pavardenis
</li>
<li>
<img src="images/user-info.png">
</li>
<li>
<img src="images/user-gear.png">
</li>
<li>
Services
</li>
<li>
Atsijungti
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
To answer the second question, I put the image in the navbar-brand anchor and then use the inspector to adjust how the navbar looks. I copy that CSS into a separate document that overrides the default Bootstrap CSS.
<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="#"><img src="../path/picture.jpg" alt="picture" height="90" width="180" /></a>
</div>
Your CSS would look something like this:
.nav-bar-brand {
height:90px;
width:100%; /*or whatever width you wanted*/
}
Again, using the inspector is always quicker than experimenting and then uploading the CSS document.
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.
Hi I am trying to customize the boostrap default navbar.
I do not expect you to do all my work, but I need help to style the li field so it hangs over the navbar.
How do I make that?
Code I have:
<nav class="navbar navbar-default navbar-fixed-top" 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" data-toggle="collapse" data-target="#mainNavigation-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 hidden-lg hidden-md hidden-sm" href="#">Caleum Wellness</a>
</div>
<div class="collapse navbar-collapse" id="mainNavigation-collapse">
<ul class="nav navbar-nav">
<li class="active">Om oss</li>
<li>Behandlingar</li>
<li>Tidsbokning</li>
<li>Blogg</li>
<li>Kontakta</li>
</ul>
</div>
</div>
</nav>
The first image show how it is now, and the second image is how I want it.
You can try the Bootstrap customizer http://getbootstrap.com/customize/
Just change less variables how you want and then download it.
Solved the issue by creating a background image with height lower than the navigation wrapper.
The wrapper is still the same size but it looks like it is smaller.
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.