Jump to content
Sign in to follow this  
Followers 0
strength

Navigation Bar and Logo Styling

By strength, in DMS & Legacy Products

Recommended Posts

strength    0

strength
Posted

Hi I would like to be able to move the navigation bar on my site so that it site in line with the right hand side of the logo. I would also like to know how to add in other elements to the header i.e. add a phone number etc (I can't work out where to add any extra text in here). I am really new to CSS code so far the only changes I have made are as below. I would need to know exactly where to then add in the code to make the change above. I have tried various options on the forum but can't get it to work. <html> <head> <style type="text/css"> body { background-color:#000000; } h1 { color:#00B1B7; text-align:left; font-family:"Impact"; font-size:15px; } p { font-family:"Arial"; font-size:12px; } </style> </head> <body> <h1>CSS example!</h1> <p>This is a paragraph.</p> </body> Thanks Rachel

Share this post

Link to post
Share on other sites

catrina    103

catrina
Posted

A custom hook would work for moving the navigation to where you want it and adding additional elements to the right. Here's a tutorial on implementing your first hook: http://www.pagelines.com/docs/base-child-theme If you need assistance with working it out, let us know. Just a suggestion: If you're adding navigation to the right of the branding in addition to other elements (like a phone number and so forth), perhaps you might want to reconsider the placement of the navigation. I don't know how many pages are displayed in the menu, but it's something to think about...

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post

Link to post
Share on other sites

strength    0

strength
Posted

Hi Thanks for getting back to me I am not working on the child theme - for some reason it kept saying it was loaded up but won't show and I got short of time so needed to move on with this on the main one. Excluding the idea of adding phone numbers in is there any way to make the change to the nav bar position and the logo with just the CSS instead? I am just keeping a track then of any changes I make as I go. Thanks

Share this post

Link to post
Share on other sites

catrina    103

catrina
Posted

You can add this CSS: 

#menu nav ul div.main-nav {margin-top: -80px; margin-left: #px;}

Adjust the left margin number according to your wishes so that it fits next to the logo correctly.

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post

Link to post
Share on other sites

strength    0

strength
Posted

Hi Thanks again but I have entered this and it has made no changes? Please can you confirm that I was right to just enter it in as a single type code line? Thanks

Share this post

Link to post
Share on other sites

kastelic    6

kastelic
Posted

Did you replace the # with a number? A single line is fine.

Share this post

Link to post
Share on other sites

aabatangle    0

aabatangle
Posted

Can you walk me through how to do this with hooks? The hooks tutorial is really, really vague. Do I have to hard code the logo with an img tag, or is there some dynamic way to reference it? Please, I beg you, improve the hooks tutorial. It seems very powerful, but I'm spending too much time guessing how it works. Thanks!

Share this post

Link to post
Share on other sites

catrina    103

catrina
Posted
Do I have to hard code the logo with an img tag, or is there some dynamic way to reference it?
Yes, you will need to use an image tag code (i.e. 
[/code]

) If you're adding a linked image, it would be... `IMAGELINK` What does your hook in the functions file look like now? Can you post it here?

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post

Link to post
Share on other sites

scentbyanangel    0

scentbyanangel
Posted

Abc, Did you figure out how to change the nav bar by your branding? I am also having a hard time with this. Thanks!

Share this post

Link to post
Share on other sites

Kate    3

Kate
Posted

Hi Sabrina, What in particular are you having a hard time with?

Share this post

Link to post
Share on other sites

scentbyanangel    0

scentbyanangel
Posted

Kate, I am trying to get the navigation to move up right next to my brand name. I am really new to CSS and have tried a few things. In the custom code box pagelines provides with their layout, I pasted this code #menu nav ul div.main-nav {margin-top: -80px; margin-left: #px;) I tried replacing the # sign with numbers, but nothing happened. Am I doing something wrong? What else do I need to do? Thanks for your help!

Share this post

Link to post
Share on other sites

timlinson    3

timlinson
Posted

I think this thread was created before the BrandNav section was added. I'm pretty sure you don't have to do any manual customization anymore.. just use the BrandNav as your navigation in Template Setup.

Share this post

Link to post
Share on other sites

scentbyanangel    0

scentbyanangel
Posted

Ah thanks Tim! I didn't even see that :) Exactly what I needed!

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
Go To Topic Listing DMS & Legacy Products
×