bootstrap and logo placements

Hello again

This is a continuation of a previous question I asked yesterday. Still getting my head wrapped around bootstrap, so this is probably an easy one, I hope :)

Right now, on my page, I'm trying to get my logo to move over to the left a bit more (between 75-100 pixels more I'm guessing). If I add

margin-left: -100px;

to the main image class, it moves it over, but then gets real jumpy whenever I resize the browser window. Ideally, I'd like to just have the logo jump up into the left side of the nav bar when the nav bar collapses and becomes a dropdown.

any advice is greatly appreciated!

Cheers
Josh
LVL 34
Big MontySenior Web Developer / CEO of ExchangeTree.org Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Manoj PatilSr. Software EngineerCommented:
Hi,
Can you please explain more.
Is this you want...?
Is this correct location of the logo ?
0
Big MontySenior Web Developer / CEO of ExchangeTree.org Author Commented:
not quite. what I want to do is when the view port is roughly that size, and the menu items collapse down into the drop down menu in the top right, i want to shrink the logo down and put it in the same row as where the collapsible menu appears, all the way to the left side of that white space.
0
Neil_BradleyWeb UX/UI DeveloperCommented:
I would do the following:
1. Hide your primary logo at the same break point where the nav collapses
do this by updating the  div that wraps arund the logo from class="col-lg-3 pull-left xtLogo"  to class="col-lg-3 pull-left xtLogo hidden-xs"
The hidden-xs will do the work for you
2. Add a a second logo here
<div class="container">    
  <!-- logo that will only be visible when the primary logo is not -->  
  <img src="img/logo.png" class="pull-left brand">              
            <!-- 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" aria-expanded="false">

Open in new window


3. Add a new style that controls the new logo
img.pull-left.brand {
max-height: 60px;
margin-top: 10px;
margin-bottom: 10px;
display:none
}

Open in new window


4. Write a new media query that shows the second logo at the exact moment the prmary logo hides.
@media (min-width: 768px)
.img.pull-left.brand  {
display: block;
}

Open in new window

This will do what you need
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Big MontySenior Web Developer / CEO of ExchangeTree.org Author Commented:
doesn't look like it's worked...can you take a look and see if I missed anything?
0
Neil_BradleyWeb UX/UI DeveloperCommented:
Everything is almost there.
Update the media query I gave you to
@media (max-width: 768px){
.img.pull-left.brand  {
display: block
}}

Open in new window

Make sure you include all of the curly brackets show in my snippet.
Also make sure its at the bottom of your style sheet.
Tested it and it works perfectly..
Cheers,
N
0
Big MontySenior Web Developer / CEO of ExchangeTree.org Author Commented:
i tried the new code and it hides the big logo, but doesn't show the one in the whitespace at the top of the page
0
Neil_BradleyWeb UX/UI DeveloperCommented:
The media query tells the smaller logo to appear at the 768px break point.
Check to make sure that the media query comes at the very end of your css as the code set up works perfectly on my local system.
N
0
Neil_BradleyWeb UX/UI DeveloperCommented:
Spotted the typo. You need to remove the dot from img.
Updated media query
@media (max-width: 768px){
img.pull-left.brand  {
display: block
}}

Open in new window

N
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Big MontySenior Web Developer / CEO of ExchangeTree.org Author Commented:
perfect, that does it!

the only thing I noticed is when I resized my browser, the white box on the right side sometimes jumped down the page, then back up. it seems to happen around the 950px wide mark, any ideas why and should I really concern myself with it?
0
Neil_BradleyWeb UX/UI DeveloperCommented:
i would ask you to open up an new question as the original question has been answered.
Cheers,
n
0
Big MontySenior Web Developer / CEO of ExchangeTree.org Author Commented:
Sure no problem. I'm not even going to worry about it right now. Thx again for all of your help again!
0
Neil_BradleyWeb UX/UI DeveloperCommented:
Pleased to help out
N
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.