• 0
Sign in to follow this  
Followers 0

larger logo? Change height of Nav bar?

Question

Posted · Report post

Husband wants his logo bigger - 100px in height- how do I change the height of the nav bar?

 

I tried this:

 

.navbar .plbrand img {
    max-height: 100px;
}
body .pl-content img {
    height: 100px;
    max-width: 100%;
}
 
Site can be seen here:
 
thank you!

 

Share this post


Link to post
Share on other sites

22 answers to this question

  • 0

Posted · Report post

Hi twosis - The code you've got there (.navbar .plbrand img) should do the trick. If not, try adding !important to it like .navbar .plbrand img {max-height: 100px !important;}

2 people like this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi twosis

Please, you can try with

 

 

.navbar.fix.navbar-full-width.pl-color-base {

    height: 100px !important;}

 

or better

 

.navbar.fix.navbar-full-width.pl-color-base {

    height: 7em !important;}

 

To be responsive

 

I believe that, you can use too

.navbar {height: 7em !important;}

 

;)

1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

batman & Jake - thank you!  This worked beautifully :-)  Now I have to figure out how to move the menu down to the bottom!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Glad to hear that worked twosis. If you're looking for a nav option lower in the page you could just drag the NavBar section somewhere into your footer and add the logo in a media box next to it much like is outlined for a different purpose here http://docs.pagelines.com/tutorials/creating-a-branding-area.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thank you Jake!

1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Happy to help you twosis !

 

I take note of this Jake

wpml_mail.gif

1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Many thanks for your willingness to continually help others, batman - it's very much appreciated.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi Jake

This is the live of the superheroes like me....

:D 

Now seriously, I really enjoy helping, like all of you help me and your comment gives me "the force" to keep doing.

Thank you Jake !

1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks I did this... .navbar {height: 10em !important;}

 

It made the navbar height larger but how do I make the Logo larger.

 

See soft.atlanticabate.com

 

Thanks ahead of time.

 

Hi justinsmarshall

You can try to add in

Custom > Custom CSS/LESS

or in 

Child theme

 

It is advisable to learn how to do this on your own too.  

http://docs.pagelines.com/customize/how-to-customize

and

http://docs.pagelines.com

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Also if you look at me contact page. Shows up. ;"> shows up after [contact_bank form_id=1]. I can't get it off. batman

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi there, check in the textbox you have the code for the form in. At the bottom you should see those additional characters. Delete them and save to remove.

 

To change your logo you'll need to change the css for both the image and the height of the nav.

 

.navbar .plbrand img {
    max-height: 80px;
}
 
.navbar {
    height: 6em !important;
}
 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

James B

Hey James, Thanks for the dimensions on the navbar.

 

I am using Contact Bank Plugin within the DMS. So in the CSS padding in the text box i wrote [contact_bank form_id=1]. There is no  ;"> anywhere in the text box just that short code. I can't figure it out. When I try putting the short code right in the wordpress page block it won't show at all. 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi justin 

 

Have you double checked the code for the form itself doesn't have the extra character at the bottom? Im assuming you are using a contact form plugin? 

 

I am looking at http://soft.atlanticabate.com/contact-us-2/ but i do not see a form or the extra character. 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Sorry try now. Also just so you know I tried 4 different types of contact forms and it all did the same. What I want to do is make on column the form and another google map. I put the code into the CSS padding and it works only half the time. Is there a secret to the madness?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi there, the shortcode will need to go into the 'text content' area in the admin panel, not in the css padding field. This could be what's causing the issue. You can also

 

http://screencast.com/t/VM5cR3SEw

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

James B I have tried both but neither seem to work. It just won't show when I enter it into the wordpress page and when put into the context it just shows as text.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

James B

Hey James, Thanks for the dimensions on the navbar.

 

I am using Contact Bank Plugin within the DMS. So in the CSS padding in the text box i wrote [contact_bank form_id=1]. There is no  ;"> anywhere in the text box just that short code. I can't figure it out. When I try putting the short code right in the wordpress page block it won't show at all. 

 

If the Shortcode doesn't work in the Wordpress Content editor, then the issue is with the plugin itself, you will need to contact the developer.

Also, what does this have to do with increasing the NavBar logo image ? Please refrain from hijacking topics with questions not related to the topics subject.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi all, thanx, i was looking for this. Just now - I have bigger logo and bigger fixed nav bar. Is also possible to fix the logo & links from the menu not on the top of the nav bar but  in the center or bottom of the fixed nav bar. thanx

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi there, you can align the items to the bottom of the navbar by adjusting the margin-top to move them down.

 

Example of moving logo down

 

.navbar .plbrand {margin-top:60px;}

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