3 Logos not disappearing with responsive navbar - html

I've tried everything to make my 3 logos disappear when the browser becomes mobile friendly. Instead they just float around the screen. I've tried placing my images before, after, and all sorts of places in between of my navbar code:
<header id="header">
<div id="headerbg"></div>
<div class="container">
<div class="navbar">
<div class="navbar-inner">
<a class="brand"></a>
<img class="appstore" src="img/apple.png"></img>
<img class="appstore" src="img/googleplay.png"></img>
<a class="btn btn-navbar" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse collapse navbar-responsive-collapse">
<ul id="nav" class="nav">
<li>home</li>
<li>about</li>
<li>features</li>
<li>signup</li>
<!-- portfolio link not needed <li>portfolio</li> -->
<li>contact</li>
</ul>
</div>
</div>
</div>
</div>
</div>
You can see my site here .com
And if you make the browser small, you will notice the navbar menu icon shows up, and if you click it, my logos for , google store, apple store, are floating everywhere. This is driving me nuts. I've searched bootstrap, stack overflow, google, and other sites to try and figure this out. I am using Twitter Bootstrap obviously for this site. Any help would be much appreciated!

Strange, I inspected your website with Google webtools, and when I simply add class 'hidden-phone' (= the class you need to add to elements to hide them in bootstrap) to the relevant links/ images, they disappear as expected.

Related

Bootstrap4 navbar not collapsed on desktop page load - fine in mobile view

URL TO TEST SITE: enter link description here
I have just attempted to upgrade to bootstrap 4 (alpha 6)
It seems that I am having the opposite issue of most people, in that my .navbar is not collapsed as expected on the initial page load in desktop view. Rather it appears as a horizontal list which pushes the .navbar element to take up about a third of the desktop view. However the .navbar will not uncollapse in mobile view.
Here is the navbar html render:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
Marvel Adventures
<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>About Us
</li>
<li>Guides
</li>
<li>Surveys
</li>
<li>Monkee
</li>
<li>Characters
</li>
<li>Contact
</li>
<li>Modal
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Login
</li>
</ul>
</div>
</div>
</div>
I have done the following so far in an attempt to resolve the issue:
used chrome to inspect the navbar.
checked to make sure all stylesheets are loading.
checked that all javascript are loading
check that jQuery is loading
a. googled for possible solutions.
b. checked stack over flow for possible solutions.
I've just upgraded to bootstrap 4. I have looked on stackOverflow and googled in attempts to find a resolve to my issue, but i have as yet to find one.

Adding a logo to a bootstrap template

I've got a template I'm trying to edit and i've tried every posted solution i've found, specifically this:https://codepen.io/bootstrapped/pen/KwYGwq but everytime it causes a format error.
My logo is 3000x700, transparent background...it has rasterized font so i was just trying to fit it, but if need be, i could put the logo in with html font beside it. I just can't figure out how to get it to fit into the default navbar. The closest I've been able to get is the logo in the right region, but it blows the navbar's size up. This is the default code:
<header>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" 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>
</button>
<a class="brand" href="#"><i class="icon-rocket"></i> Landlr</a>
<div class="nav-collapse collapse">
<ul class="nav pull-right">
<li>Home</li>
<li>Project</li>
<li>Features</li>
<li>Specifications</li>
<li>Pricing</li>
<li>Testimonials</li>
<li>Get Started</li>
</ul>
</div>
</div>
</div>
</div><!-- .navbar -->
</header>
On the included example i tried, it actually removed the navbar...other examples wouldn't resize the logo despite my css matching. Help appreciated.

Bootstrap 3.3.4 navbar issue - positioning

Here is the MarkUp:
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
Kellumonline
<button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="index.html">Home</li>
<li><a href="tech/index.html">Tech</li>
<li>Gaming</li>
<li>Skate</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
Website where the code is currently published on
I have no CSS styling any of the containers or elements. I seriously have like 3 styles:
one is pulling a font from Google,
the second is specifying a width and height for my jumbotron,
the third is specifying the margin for my 3 columns at the bottom of
my home page.
I am working on my website and need some help figuring out why my navbar links are spaced the way they are.
Also, my contact page is not displaying correctly and it has the same code in it as the other pages.
Any help, feedback or constructive criticism is much appreciated.
Thanks
It's very stupid...
The navbar in your contact page has this following class:
class="navbar navbar-incerse navbar-static"
So
Change incerse by inverse
Looking at it, I can see the the Home link and the Tech link don't have their closing </a> tags. Add those in and that should sort it out.
Also, #yenne-info has the correct answer to your Contact page issue.

Overflowing navbar to a second row using Bootstrap

I'm just getting started with Bootstrap, and am doing so by designed a page for myself from scratch. I'm still stuck on the navbar as of now.
Here's how I want it to work: On desktop/tablets, it should work just like conventional navbars, with one header element on the left and a list of option on the right. On mobile, however, instead of having the navbar collapse into a menu, I want it - all of it - to just move to another row within the navbar.
I tried making the class of the part I want to overflow to "sidebar", but the list still renders vertically, like with the collapse menu.
A friend of mine has implemented this on his site at "thepickletheory .com" (Can't add a direct link for lack of reputation), and it works really well there. He's just used a WordPress theme, however, and the code isn't in Bootstrap too, so I can't implement it myself either.
Here are some pictures that show what I'm trying to accomplish.
Navbar in desktop/tablet view
[Name] --- [Item 1] [Item 2]
Navbar in mobile view
[Name]
[Item 1] [Item 2]
Here's the code for the navbar that I've written so far, which moves the second part of the navbar to another row, but renders the list vertically (links are dummies for now):
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Harshil Shah</a>
</div>
<div class="sidebar">
<ul class="nav navbar-nav navbar-right">
<li>About</li>
<li>Twitter</li>
<li>Blog</li>
<li>Archive</li>
</ul>
</div>
</div>
</div>
Would really appreciate some help with getting this to work. Thanks!
EDIT 2:
Through some rather fortunate trial-and-error, I've stumbled upon the solution: the unordered list just has to be assigned to the .nav-pills class, and that's all it takes.
You has to specify navbar-collapse collapse here is used to enable the toggle menu in Small screens instead of showing full menu just look here
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
<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>
<a class="navbar-brand" href="#">Harshil Shah</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<div class="sidebar">
<ul class="nav navbar-nav navbar-right">
<li>About</li>
<li>Twitter</li>
<li>Blog</li>
<li>Archive</li>
</ul>
</div>
</div>
</div>
</div>
The responsive navbar requires the collapse plugin to be included in your version of Bootstrap don't mind which is binded in bootstrap.js. here the source
Instead of collapse you can use bootstrap grid classes source
<div class="navbar-header col-xs-12 col-md-4">
</div>
<div class="col-xs-12 col-md-8">
<!-- here side bar menu -->
</div>
which will bind accordingly by device you are using. put col size as your need.

RWD failing for large screen smartphones

These dog gone phone manufacturers are making our job harder. The introduction of larger phones is causing Bootstrap RWD to respond as a tablet instead of a phone. This is not a major deal sometimes because the responsiveness did take place but the dropdown menu (hamburger menu) fails to show up and forcing it to open prematurely it's not right either. Then you'll have the same problem with smaller tablets or phones in landscape mode.
Here is what I mean:
This is the way I designed it to look for col-xs-12 and instead I am getting the col-sm-12 to render in the phones as the image further below displays. "So what if the hamburger menu doesn't display", you'll say. The regular menu is still too small in a phone and hard to tap.
here is the code I am using for the header
<header>
<div class="header">
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<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">MENU</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/"><img src="images/banner.png" alt="banner" /></a>
</div>
<div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav" id="navigation">
<li class="active">Home</li>
<li>about</li>
<li>testimonials</li>
<li>services</li>
<li>contact</li>
</ul>
</div>
</div>
</nav>
</div>
</header>
Anyone knows how to get around this.
Well, I found the problem folks. I feel like doing a face palm so please, I accept all the "duh" and "doi" you throw my way. lol Here is how to fix it.
Add <meta name="viewport" content="width=device-width, initial-scale=1"> to the head and voila!
:shaking my head: