Center Navbar / Brand for Smaller Displays - html

Apologies if this has already been asked, but I am trying to center my navbar if the user shrinks their display.
Right now I have the navbar-items floated to the right and the brand on the left for large displays. These remain on the right and left as the display shrinks.
I'd like for them to be centered instead when the display shrinks.
For large displays this is what I want. (What I'm getting now)
For small displays I want the navbar and brand to be centered. (Not what I'm getting right now)

It may not be the best way to do it, but you could just use an image instead and then apply the "center-block" class to it
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<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>
<img class="img-responsive center-block" src="img/logo.png" alt="">
</div>

Related

span.icon-bar not being displayed in the browser

I am trying to use the Bootstrap class="icon-bar" but its not showing up on the screen.
The elements are present in the screen but default height and width is showing up 0.
I have been through multiple questions on Stack Overflow and different sites but no help.
Following is the code:
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top bg-light">
<div class="containter">
<button type="button" class ="navbar-toggle" data-toggle="collapse" data-target=".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>
</div>
</nav>
</body>
Image:
Links that I have followed:
Bootstrap icon-bar span not visible
Bootstrap icon-bar not showing
Bootstap:span class icon bar not working
As answered in the comments by #Akhi, there is no span.icon-bar in Bootstrap 4.
Instead we need to use the class: <span class="navbar-toggler-icon"></span>
Doing so has resolved my problem.

How do i get my menu to produce correctly

I need be able to use a bootstrap nav menu however their is a probelm here I have attached navbar on the advance settings of a menu item in joomla however the menu does not look anything like it should do.
<nav class="navbar navbar-default" role="banner">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".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="index.html"><img src="<?php echo $this->baseurl ?>/images/us2pk.png" alt="US2PK"></a>
</div>
<div class="collapse navbar-collapse navbar-right">
<jdoc:include type="modules" name="position-7" style="none" />
</div>
</div><!--/.container-->
</nav><!--/nav-->
Here menu is wrong
http://us2pk.solitudesoftware.co.uk/how-us2pk-works
Here it is correct.
http://us2pk.solitudesoftware.co.uk/
Most importantly, the markup on the correct menu has <li><a>|</a></li> - elements between the actual menu elements. You can add something similar by adding new menu items to your menu between each item, where you choose menu item type System links->Text separator. Here you simply add a | as the title. This is rendered with <li class="item-122 divider"><span class="separator ">|</span></li>, and should be easy enough to style similar to the correct menu.

Logo overlap in bootstrap twitter navbar

I want to make my logo overlap my navbar but i dont know how. I tried to increase the size of the picture but that didn't work out, the navbar just enlarged. I also want it to be in the same div class because else it won't be nice on the mobile version of the site. I'll add pictures of what it looks like and what i want it to be and the code. Thanks in advance
Code:
<!-- Navigation -->
<nav class="navbar navbar-inverse 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>
<img style="max-width:80px; margin-top:0px;" src="img/logo.png" class="logo navbar-brand">
<a class="navbar-brand" rel="home" href="index.html"><b>MY WEBSITE</b></a>
</div>
give your logo a class of "logo" then add:
.logo {
position: fixed;
top: 1em;
left: 1em;
display: inline;
}
fix your nav bar as well.
Hope that helps!
Just put the logo outside the nav bar div. And align it top:0px left:0px.
Or if you want the logo on the left at all times then just float it left.

Bootstrap 3 'img-responsive' class not so responsive

Update: Here is the latest jsFiddle.
You'll likely need to resize the Result pane, or even break it out into its own window, in order to see it in all its glory.
As you can see, I have a 400x200 logo image that I have attempted to make responsive (via the .img-responsive class), however it continues to remain the same size (400x200) and is not resizing + nesting nicely into my header navbar.
Ideally the image should resize and fit inside the navbar right in line with the menu items (MUCH AMAZE, SUCH WOW, etc.).
I have a feeling that it has something to do with this part:
<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="/"><img src="http://placehold.it/400x200" class="img-responsive" height="220" /></a>
</div>
I'm not really sure what this "Toggle navigation" <button/> is doing (the one that comes right before my logo <img/>). Admittedly, I am cargo culting here and just got some generic Bootstrap 3 code off their examples site. Am I applying the wrong styling rules? Do I need to put the <img/> in a form or div or some other type of container here? Where am I going awry?
add this may help you
.img-responsive
{
width:100%;
}

What is the easiest way to put a responsive logo into a Bootstrap Navbar

So, I am a noob, working through using this template : http://startbootstrap.com/template-overviews/freelancer/
I am editing it, and trying to get some bells and whistles to work better. I want to put my logo into the header and have it be responsive, I cannot get other answers I've found here to work... I may be a bit thick, in fact that is probably the big issue.
What is the easiest way to place a responsive logo graphic into the bootstrap navbar?
This is the code I currently have.
</head>
<body id="page-top" class="index">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<img src="images/My_logo_navbar.png" class="img-responsive">
<div class="navbar-header page-scroll">
<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>
</div>
Please advise.
Add
<div class="navbar-brand navbar-brand-left"><img src="images/My_logo_navbar.png"></div>
after the </button>
In this way boostrap automatically position your logo on left top corner.
And crop your My_logo_navbar.png to size you want and use media queries to change it width or height on smaller devices. If you want you can use two of navbar-brand classes with separate id's. One for larger screens and one for smaller screens.
I always use this for my projects.