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
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
Last Comment
ASKER
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.
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
3. Add a new style that controls the new logo
4. Write a new media query that shows the second logo at the exact moment the prmary logo hides.
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">
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
}
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;
}
ASKER
doesn't look like it's worked...can you take a look and see if I missed anything?
Everything is almost there.
Update the media query I gave you to
Also make sure its at the bottom of your style sheet.
Tested it and it works perfectly..
Cheers,
N
Update the media query I gave you to
@media (max-width: 768px){
.img.pull-left.brand {
display: block
}}
Also make sure its at the bottom of your style sheet.
Tested it and it works perfectly..
Cheers,
N
ASKER
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
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
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
ASKER CERTIFIED SOLUTION
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
ASKER
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?
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?
i would ask you to open up an new question as the original question has been answered.
Cheers,
n
Cheers,
n
ASKER
Sure no problem. I'm not even going to worry about it right now. Thx again for all of your help again!
Pleased to help out
N
N
Web Development
Web development includes all aspects of presenting content on intranets and the Internet, including delivery development, protocols, languages and standards, server software, browser clients, databases and multimedia generation.
77K
Questions
--
Followers
--
Top Experts
Get a personalized solution from industry experts
TRUSTED BY
Can you please explain more.
Is this you want...?