2

I have been working in bootstrap for awhile now, and really love the features of it all. But I am having trouble with the navigation header on mobile view. I have an image that displays during the desktop version of the website, and I am trying to change to a smaller icon logo in mobile display.

I have the site bringing up the icon bar and collapsing everything for the login screen on mobile properly. I think it might be as simple as the fact that I don't fully understand the CSS of bootstrap but could anyone tell me how to change the image when the screen collapses into mobile mode.

This is what the website looks like in desktop view: enter image description here

This is what it looks like when I go mobile now: enter image description here

This is what the desired look is (made in photoshop): enter image description here

When the bar goes mobile, I'd like to swap the two images.

Here is my bootstrap code -

 <div class="navbar navbar-inverse navbar-fixed-top dropShadow" role="navigation"> <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="#"><img src="images/logoWhite.png" width="400px"></a> </div> <div class="navbar-collapse collapse"> <form class="navbar-form navbar-right" role="form"> <div class="form-group"> <input type="text" placeholder="Email" class="form-control"> </div> <div class="form-group"> <input type="password" placeholder="Password" class="form-control"> </div> <button type="submit" class="btn btn-primary">Sign In</button><span style="color:white;"> or</span> <button type="submit" class="btn btn-success">Sign Up</button> </form> </div><!--/.navbar-collapse --> </div> </div>
Improve this question

2 Answers 2

Reset to default
3

you can use a media query for this. but first use that logo image in background.

assuming that you use .logo for the logo classmate university

HTML:

<a class="navbar-brand" href="#"><span class="logo"></span></a>

CSS:

@media(max-width:767px){ .logo{ background:url(images/hat.png) no-repeat; width : 400px; display:block; } } /* this logo will be used for everything outside of the above breakpoint */ .logo{background:url(images/logoWhite.png)
Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

I would recommend setting the width to a % so it will 'shrink' when the size of the browser does. So you don't have to have many different image sizes.
@zazvorniki actually i prefer what you have stated, but in his case the images are changing when displayed on smaller screens.
even when the change happens, it's still a good practice if the user decided to make the browser even smaller or text is added in the future.
do I need to give the span itself a size?
The <span> tag is used to group inline-elements in a document. I just used it to make the image to be used in background. The <span> tag provides no visual change by itself. The <span> tag provides a way to add a hook to a part of a text or a part of a document. you can manipulate it by using css. sorry for bad english
|
2

You can put both images there inline, and using classes .visible-xs on small logo, for mobile mode, and .hidden-xs class on other (university name) image tag.

.visible-xs - displays ur image on mobile mode and hides on rest of the modes, while .hidden-xs hides the image on mobile mode and displays on rest of modes.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.