• 0
Sign in to follow this  
Followers 0

Brand Nav Size

Question

Posted · Report post

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

13 answers to this question

  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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
  • 0

Posted · Report post

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
  • 0

Posted · Report post

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
  • 0

Posted · Report post

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  
Followers 0