Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

bootstrap and logo placements

Posted on 2014-11-18
12
599 Views
Last Modified: 2014-11-22
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
0
Comment
Question by:Big Monty
  • 6
  • 5
12 Comments
 
LVL 19

Expert Comment

by:Manoj Patil
ID: 40452050
Hi,
Can you please explain more.
Is this you want...?
Is this correct location of the logo ?
0
 
LVL 33

Author Comment

by:Big Monty
ID: 40452605
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
 
LVL 5

Expert Comment

by:Neil_Bradley
ID: 40456325
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
How our DevOps Teams Maximize Uptime

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us. Read the use case whitepaper.

 
LVL 33

Author Comment

by:Big Monty
ID: 40456572
doesn't look like it's worked...can you take a look and see if I missed anything?
0
 
LVL 5

Expert Comment

by:Neil_Bradley
ID: 40456625
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
 
LVL 33

Author Comment

by:Big Monty
ID: 40457531
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
 
LVL 5

Expert Comment

by:Neil_Bradley
ID: 40457889
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
 
LVL 5

Accepted Solution

by:
Neil_Bradley earned 500 total points
ID: 40457898
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
 
LVL 33

Author Comment

by:Big Monty
ID: 40459840
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
 
LVL 5

Expert Comment

by:Neil_Bradley
ID: 40459883
i would ask you to open up an new question as the original question has been answered.
Cheers,
n
0
 
LVL 33

Author Comment

by:Big Monty
ID: 40459928
Sure no problem. I'm not even going to worry about it right now. Thx again for all of your help again!
0
 
LVL 5

Expert Comment

by:Neil_Bradley
ID: 40459955
Pleased to help out
N
0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Css regex 6 38
Change Firefox bookmarks menu font size 2 34
Change box shadow 1 29
simple html dom php accessing table/cell  values 4 22
Because your company can’t afford for you to make SEO mistakes, you’ll want to ensure you’re taking the right steps each and every time you post a new piece of content. This list of optimization do’s and don’ts can help you become an SEO wizard.
Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

838 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question