Jump to content


Photo
- - - - -

Resizing Navbar?


  • Please log in to reply
7 replies to this topic

#1 bloggotech

bloggotech

    Member

  • Members
  • PipPip
  • 13 posts
  • Country: Country Flag

Posted 15 January 2014 - 05:59 PM

Hello,

 

Can anyone help me on my Website: www.blogdude.co.uk which is running DMS free version 1.14. I can't see the setting to change how big the navbar is and I would need to make it bigger for the Logo. I've got a code from the forum:

 

.navbar.navbar-content-width {
    border-radius: 4px 4px 4px 4px;
    font-size: 14pt;
    min-height: 160px;
}
 
But I'm not sure where to put it or if it will even work,
 

Can anybody help me?

 

Thanks,

 

Kevin



#2 James B

James B

    Advocate

  • Members

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

Posted 16 January 2014 - 12:10 AM

Hi Kevin

 

Unfortunately we're unable to help directly with css code for the free edition of DMS. However any code you have needs to be placed within the css/less box inside the DMS control panel. I would advise looking into adding a width to your code if you want to reduce it, you have commands in there for min-height, font-size and border-radius but nothing for width etc.



#3 bloggotech

bloggotech

    Member

  • Members
  • PipPip
  • 13 posts
  • Country: Country Flag

Posted 16 January 2014 - 04:21 PM

Okay then, do you know how to make the navbar bigger because the css code doesn't work.

 

Thanks,

 

Kevin



#4 James B

James B

    Advocate

  • Members

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

Posted 17 January 2014 - 12:03 AM

Hi Keith

 

Using chrome or firebug, you can inspect any element to see see the css code assigned to it. So in this case you'd look at the navbar in the inspector find the code relating to the width or height, this will appear on the right hand side of the inspector. Edit the figures until you see it move into the correct position on the screen live as you're making the adjustments. Then copy/paste that code back into the css/LESS panel inside DMS and save.

 

I've recorded a short video cast to show you the process of finding css and making adjustments using the inspector tools below.

 

http://screencast.com/t/apg80CFMedNh

 

More information and guidelines on customizing DMS can be found at http://docs.pageline...ow-to-customize



#5 bloggotech

bloggotech

    Member

  • Members
  • PipPip
  • 13 posts
  • Country: Country Flag

Posted 19 January 2014 - 11:16 PM

Okay, I could not figure out how to do the method outlined in the post but I found a way to make the picture bigger: http://forum.pagelin...tering-columns/ which is what I wanted. Is it okay to use the code outlined in this post? 



#6 bloggotech

bloggotech

    Member

  • Members
  • PipPip
  • 13 posts
  • Country: Country Flag

Posted 19 January 2014 - 11:23 PM

I have also changed the code to add a small margin at the bottom: .navbar .plbrand img {max-height: 40px; margin-bottom:5px;}

 
Is this okay to use? 


#7 Danny

Danny

    Is Awesome!

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

Posted 20 January 2014 - 12:45 PM

There is no issue with the code from that post or from what you have provided above.



#8 bloggotech

bloggotech

    Member

  • Members
  • PipPip
  • 13 posts
  • Country: Country Flag

Posted 20 January 2014 - 05:35 PM

How would you change the colour of the navbar to a custom colour code?