Jump to content


Photo
- - - - -

Navigation Bar Image or Header?


  • Please log in to reply
9 replies to this topic

#1 North Gear

North Gear

    Newbie

  • Members
  • Pip
  • 5 posts
  • Country: Country Flag

Posted 21 February 2014 - 07:38 PM

Is there any way to increase the maximum size of the navigation bar? I want it to be atleast 100px, but I didn't know If that was possible. I have increased the navigation bar size, just can't figure out how to allow the image to be larger. If not then is there a solution to add a logo and nav bar into the Header section? The logo for my site is really meant to be larger. 

 

 



#2 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 21 February 2014 - 11:45 PM

Hello,

 

You've done the correct thing on the navbar, the same code applied to the navbar height is also applied to the logo inside the navbar. Max-height:29px.

 

If you set this to none then the image will fill the navbar.

 

See - http://screencast.com/t/gteVwXlLBMf



#3 North Gear

North Gear

    Newbie

  • Members
  • Pip
  • 5 posts
  • Country: Country Flag

Posted 23 February 2014 - 02:09 AM

Thank you for the help, but should I use firebug to write the code into the custom codes box, or is there another way? I already have:

 
#site #header {
height: 25px;
}
.navbar {
min-height: 80px;
  
}

Edited by North Gear, 23 February 2014 - 02:13 AM.


#4 Danny

Danny

    Is Awesome!

  • Moderators
  • 15680 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 23 February 2014 - 12:48 PM

You can add your custom code to tools like Firebug and see how it looks, once you're happy, add the code to your custom CSS.



#5 North Gear

North Gear

    Newbie

  • Members
  • Pip
  • 5 posts
  • Country: Country Flag

Posted 23 February 2014 - 03:19 PM

Wow, for the life of me, I cannot get firebug to work for Chrome. Any other suggestions? 

 

Edit:

Well I installed firefox, got firebug, but now I cannot find the lines that he is viewing, or where to change the minimum values.


Edited by North Gear, 23 February 2014 - 03:31 PM.


#6 Danny

Danny

    Is Awesome!

  • Moderators
  • 15680 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 23 February 2014 - 03:50 PM

Use Chromes own dev tools, for me they're superior to Firebug.

 

https://developers.g...eveloper-tools/



#7 North Gear

North Gear

    Newbie

  • Members
  • Pip
  • 5 posts
  • Country: Country Flag

Posted 23 February 2014 - 04:03 PM

Alright. Thanks! With all the help, I managed to change it.  But would you know how to make the nav bar items (Homepage, store, search function) sink to the bottom of the nav bar? Or do the just float up top?



#8 Danny

Danny

    Is Awesome!

  • Moderators
  • 15680 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 23 February 2014 - 04:08 PM

Not sure what you mean, I would need to see what you have, can you provide a link to your site please.



#9 North Gear

North Gear

    Newbie

  • Members
  • Pip
  • 5 posts
  • Country: Country Flag

Posted 23 February 2014 - 04:41 PM

north-gear.us

 

As you can see, the logo changed as I wished, but the nav bar items to the right, I think, would look better if they were at the bottom. 



#10 Danny

Danny

    Is Awesome!

  • Moderators
  • 15680 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 23 February 2014 - 04:50 PM

You can't really do that without extensive CSS, something which we do not provide support for.

 

What I would suggest is using a MediaBox and adding your logo image there instead. Then add the Navbar section below your image. We have a guide on our documentation which may assist you.

 

http://docs.pageline...a-branding-area