Brand Nav Size

[joshbowers 0]

I'm trying to control the brand nav size, or more specifically the logo size. So far I've messed with this:

#brandnav {
	    margin-bottom: 0.7em;
	    padding: 25px 0 11px;
	}
	#brandnav .main_nav {
	    float: left;
	    width: 76%;
	}
	#brandnav .mainlogo-link, #brandnav .title-container {
	    float: left;
	    line-height: 0.7em;
	    padding: 0 1%;
	    width: 22%;
	}
	#brandnav .mainlogo-link img {
	    max-width: 100%;
	}
	#brandnav .main_nav ul.main-nav {
	    float: left;
	    margin-left: 20px;
	}
	#brandnav li a, #brandnav .nav-special {
	    display: block;
	    text-decoration: none;
	}
	#brandnav a.nav-special {
	    display: block;
	    float: right;
	    margin-right: 0;
	}
	

But modifying that doesn't seem to change anything. If this isn't the code to be changing, what is?

[catrina 103]

Where are you adding this CSS? This might be the code you're looking for:

img.mainlogo-img {width: YOURSIZEHEREpx;}

I'm assuming you're using PlatformPro, but I'm not very sure. If you're not, let me know which theme you're using.

[joshbowers 0]

I was editing the:

#brandnav .main_nav {
	
	    float: left;
	
	[b]    width: 76%;
	[/b]
	}
	
	#brandnav .mainlogo-link, #brandnav .title-container {
	
	    float: left;
	
	    line-height: 0.7em;
	
	    padding: 0 1%;
	
	   [b] width: 22%;[/b]
	
	}

Using the base.css The code

img.mainlogo-img {width: YOURSIZEHEREpx;}
	

Lets me change the height but no the width, do I need to change the size of the nav width in order to change the logo width? If so.... How? I've tried editing

#brandnav .main_nav {
	    float: left;
	    width: 76%;
	}
	brandn...r=1.5.0 (line 8)
	.main_nav {
	    line-height: 1.1em;
	    margin-top: 0;
	    position: relative;
	    text-align: left;
	    z-index: 28;
	}

But that won't let me change width either.

[timlinson 3]

This works for me: `#brandnav .mainlogo-link img {width:50px;height:50px;}`

[joshbowers 0]

It will work as long as you enter a value equal to or less than 211 pixels wide. If I try to make it larger than 211 pixels wide, it won't change.

[Kate 3]

Hi Josh, Is 211px the width of your image?

[joshbowers 0]

No, I'd like to have it larger than that. 211px seems to be the largest the theme will allow though, I think it has to do with percentages since that seems to be how the rest of it is setup? I'm not really sure... I've never had this problem before. Just try to make the logo in the Brand Nav larger than 211px and see if it works... I'm missing something but I don't know what.

[cmunns 16]

Josh, you have a link with it setup...it may be percentage based?

[joshbowers 0]

When messing around in firebug the area that controls the nav and nav logo are percentage based (76% for nav and 22% for the image).

[catrina 103]

I can't access your site since it's in maintenance mode. How large is your image?

[joshbowers 0]

Maintenance mode deactivated for now. Image is about 350 wide by 80 tall or so. That doesn't really matter though since it's not the original image size that is being modified.

[Kate 3]

Hi Josh, There's a couple different ways to approach this, but this should get you on the right track:

#brandnav .mainlogo-link, #brandnav .title-container{width:auto !important;}
	#brandnav .main_nav{width:550px;}

[joshbowers 0]

Thanks. The !Important did the trick. I can control it with the :

.title-container{width: ***px !important;}

[raezerj 0]

Hello! I want to improve the look of my logo on the new iPad (right now it looks blurry on the retina display). I thought the solution could be to enlarge the image to twice its size (800px) and use one of the suggestions above to shrink it back down to the current size (400px). I tried these two solutions, but they didn't work -- the image remained at the uploaded size (800px): [code]#brandnav .title-container{width:400px !important;}[/code] [code]img.mainlogo-img {width: 400px !important;}[/code] My site: www.approachguides.com Any suggestions? Thanks!