Jump to content
lstskane

Logo Right On Top Of The Main Navbar And Different Navbar Text Color

Recommended Posts

lstskane    0
lstskane

Hi!

Thanks for a great framework!

I need help with two things I can't seem to figure out...

1) I want to place my logo right on top of the main navbar (in fact I want to place a site-wide picture including both picture and title of my website above, making it look like the picture is resting on top of the navbar). There is a gap of about maybe 20-30 px's and I want to get rid of it. Some custom CSS should do the trick, right? But what exactly?

2) How do I change the text color within the main navbar? I've chosen the Orange theme, and I want the text to be black.

I think I'm missing something fairly easy, so sorry about that, but I just can't seem to find the answers!

Thank you in advance!

Share this post


Link to post
Share on other sites
James B    436
James B

Hi there,

 

Yes you'll be able to edit the space between the two sections by adjusting the padding/margins between the sections, this can be done by css. For example

 


#nav {margin-bottom:0;} 

You can find an tutorial on css and how to amend code within the framework here http://www.pagelines.com/wiki/Custom_CSSm we'd also advise you download firebug or use google dev tools to locate the required Id/classes to amend.

 

If you require further information or an overview on css please reference http://www.w3schools.com/css/

 

You would also use css to change the color of the nav text, for example, just replace the names of the id's with the correct id/path you find in firebug :-)

 

Hope this helps

#nav {color: #ffffff;} 

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

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


  • Similar Content

    • lionel1
      By lionel1
      Hi,
      i try to put some images (Logos) in the Agency module / clients module section
      But i only can put 6 logos though the module propose to add more item
      Thanks for ur help
      Lionel 
      Capture d’écran 2017-06-27 à 20.55.27.png 
    • Grant Turck
      By Grant Turck+
      Navbar Broken on All Devices When Not Logged Into Wordpress. See screenshots attached from mobile. What is causing this issue and how do I fix? Site is venicepride [dot] org.


    • lbhansen
      By lbhansen+
      I am slowly getting closer to something I like for the general appearance of my site. What's currently nagging me is trying to remove the top and bottom padding/margin from the image in the header. It seems that I've done what I want with the menu but there was dead space above the image and between the image and menu.
      Trying out padding and margin settings, I got something that came close to what I want but saw odd behavior along the way. Changing either the top or bottom padding to 0 (from blank), removed all padding from the top and sides but left a small band between the image and menu.
      Setting all eight padding and margin settings to 0 removed all except the band between image and menu. (But it seems that entering 0 in only the top or bottom padding option is all that was needed.)
      So, heading into the twilight zone, I changed the bottom margin to -1. That removed the band but allowed the menu to slightly overlap the image. AND, narrowing the browser, or viewing on a phone, caused the band to reappear.
      Perhaps there's also a problem with the menu but I don't see it.
      So that's where it stands at the moment: http://756.a44.myftpupload.com 
      I seems to me that if there is a default padding value, setting it to 0 should be all that's needed to get the two sections to meet perfectly on any device/browser width.
    • Perry
      By Perry+
      Hello There, 
      I am working with Platform 5 and have run into an unnerving problem. I am trying to position my clients picture along the bottom of the container, so that it sits right on the bottom. After a good hour of googling and messing with the CSS I figured I would ask the question here. Below is my screenshot displaying my problem. I will need to do this frequently in the future. 
      My Problem Image
      Unlike in DMS, when I add a margin to an embed or image box it simply makes the container larger while keeping the padding, I cannot have any padding or any space whatsoever on the bottom of my clients image.  Is there a way to remove all padding from the container so I can have this work across screen sizes? If not is there anyway to position an element directly at the bottom of another element in Platform 5? This seems like a basic feature and was easily attainable within DMS. 
      I cannot create an image combining all these elements as it will not scale well on mobile and will make my clients logo unreadable and her face incredibly small. 
       
      Thank you for any help,
      Perry
    • chamois_blanc
      By chamois_blanc+
      Hello,
      I am a bit confused about the usage of percentages for section padding/margin settings in the PL5 UI. Percentages don't scale well for mobile devices (especially in height), so those settings are pretty much useless. Case in point, the defaults are expressed in rem units, not percentages:
      .pl-sn-pad { padding: 1rem; ... } Why force the user to use percentages in the PL5 section UI when it would have been as easy to let the user specify the unit?
×