Jump to content
Sign in to follow this  
joshbowers

Brand Nav Size

Recommended Posts

joshbowers    0
joshbowers

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?

Share this post


Link to post
Share on other sites
catrina    103
catrina

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.


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
joshbowers    0
joshbowers

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.

Share this post


Link to post
Share on other sites
timlinson    3
timlinson

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

Share this post


Link to post
Share on other sites
joshbowers    0
joshbowers

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.

Share this post


Link to post
Share on other sites
Kate    3
Kate

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

Share this post


Link to post
Share on other sites
joshbowers    0
joshbowers

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.

Share this post


Link to post
Share on other sites
cmunns    16
cmunns

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

Share this post


Link to post
Share on other sites
joshbowers    0
joshbowers

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).

Share this post


Link to post
Share on other sites
catrina    103
catrina

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


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
joshbowers    0
joshbowers

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.

Share this post


Link to post
Share on other sites
Kate    3
Kate

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;}

Share this post


Link to post
Share on other sites
joshbowers    0
joshbowers

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

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

Share this post


Link to post
Share on other sites
raezerj    0
raezerj
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!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×