Persuasion Sociable Top Header Menu panel customisation

resolved (26 posts) (3 voices)

bydelight
Member

Hi there :)

Where do I specify the alignment / placement of the extras header menu right at the top of the theme, id like to move it to the right a bit?

Is there any way I can add a background image to this area? I have added a background image into the header and body but it doesnt show up....

PS. I am getting that error with the skin editing page that doesn't update when I make changes, just keeps showing the loading symbol at the bottom. Just thought id mention it. I am using the latest version of Persuasion.

Thank you for the help :)

Posted 3 months ago #
Elliott
Support

Hello bydelight,

Add this in Dashboard -> your theme -> General Settings -> Custom CSS,

.header_links { padding-left: 100px !important; }

Posted 3 months ago #
bydelight
Member

Thank you! and I got the background image to work too, I edited the style.css file

Posted 3 months ago #
bydelight
Member

How do I add a custom image into the top extra menu panel? not related to sociable or anything.

Posted 3 months ago #
Elliott
Support

See here, http://mysitemyway.com/docs/index.php/Adding_stuff_to_the_header.

Posted 3 months ago #
bydelight
Member

yay thats the link I was looking for before!! Thank you :)

Posted 3 months ago #
bydelight
Member

Elliot, how do I get the main menu to align left and ignore the logo space? :) a bit unrelated to the thread so hope its ok that I post here. You will see I have moved the logo into the top header area. http://www.bydelight.com/enjoythejourney/

Posted 3 months ago #
bydelight
Member

Elliot I added the code: .header_links { padding-left: 400px !important; }
And it works, but it pushes out the social media icons. I wont be adding more icons so it doesnt need to allow for space, but not sure its possible to have the header links end 15 pixels just before the social media icons start?
http://www.bydelight.com/enjoythejourney/
Thank you for the help :)

Posted 3 months ago #
bydelight
Member

Í see the background image I added in the style.css isn't aligned in the centre, could you help me with the correct code below so that it is centre aligned, no repeat or anything.

#header_extras{background:url(http://www.bydelight.com/enjoythejourney/wp-content/uploads/2012/01/pps-pattern-bg2.jpg);display:block;overflow:hidden;letter-spacing:.5px;font-size:10px;line-height:55px;}

Posted 3 months ago #
Elliott
Support

I'm not sure I understand. Take a screenshot and highlight what your trying to do.

Posted 3 months ago #
bydelight
Member
Sure, attached is a screenshot with the 3 things id like to do. Note: for number 3, I dont want that background image to repeat.

Thank you for the help :)
Attachments
headerworking.jpg (85.4 KB, 4 downloads) 3 months old
Posted 3 months ago #
Elliott
Support
1.
```
.header_links {
    position: absolute !important;
    right: 90px !important;
    top: 3px !important;
}
```
2. #primary_menu { position: absolute !important; top: 8px !important; left: 0px !important; }

3. Your wanting the background image not to tile?
Posted 3 months ago #
bydelight
Member

Elliot,

Thank you :) 1. The header links are 100% http://www.bydelight.com/enjoythejourney/.

2. The primary menu code didn't do anything, remember I am not using a logo where there normally is one, I just used a small transparent .png because if I dont specify a logo it uses the persuasion one. Perhaps there is another way of removing the logo so that the menu automatically takes all the space in that panel.

3. Regarding the background image: I do NOT want it to tile.

Posted 3 months ago #
Elliott
Support

2. That should be working, make sure to play around with the values to position it wherever it needs to go.

3. Even if we take the repeat off your image is still 1500px wide so there's not going to be any noticeable change. Take a screenshot and highlight what your trying to do.

Posted 3 months ago #
bydelight
Member

3. Regarding the image, take a look at the bottom of the page at the sub footer, there I have used exactly the same background image, it is aligned in the centre, no tiling without any issues: http://www.bydelight.com/enjoythejourney/ compare it to the top one and you will see. I am trying to achieve exactly the same at the top.

Posted 3 months ago #
bydelight
Member

4. I see now that the logo I placed in the header is also using an absolute position, so it moves out when on different screen sizes. How do I edit the code below to align that image to the left of the content area?

<div style = "position: absolute; top: 20px; left: 465px;">
<img src="http://www.bydelight.com/enjoythejourney/wp-content/uploads/2012/01/pps-logo1.png" alt="Professional Passenger Services" />
</div>

EDIT: I tried to change it myself, then changed it back because it didnt work but now the entire menu panel background is missing? You will see the intro is now the background for the menu :(

I just PMed you the login details, might be easier if you take a look yourself.

Posted 3 months ago #
bydelight
Member

4. I have replaced the header file to clean it up, so the menu panel is back now :) And I was able to add the logo in and now it stays in the right place. No idea why it works now but not before :)

Ok so just the background image at the top, and the menu then were done, sorry for all the posts :)

ps. regarding the menu I have tried various values, it doesnt want to move more left, even if I go to - values.

Posted 3 months ago #
Elliott
Support

This will set it to no repeat but as I said before your image is 1500px long so there's not going to be a difference. You really want to tile in this case.

#header_extras { background-repeat: no-repeat !important; }

Posted 3 months ago #
bydelight
Member

Ok I will adjust the image. Any ideas about the menu alignment? I sent you the login details if you wanna take a look for yourself.

Posted 3 months ago #
bydelight
Member

Hi Elliot, any news on the menu? I am under a little pressure now with deadlines coming up next week, hope you can help. I tried all kinds of variations, but it wont move more left and I think it is because of the default logo space there.

Posted 3 months ago #
Elliott
Support

I already gave you code for the menu here, http://mysitemyway.com/support/topic/persuasion-sociable-top-header-menu-panel-customisation#post-50408, which after looking at your site it appears your using correctly.

As I said before, play around with the values until it's positioned wherever you want it to be.

Posted 3 months ago #
bydelight
Member

Elliot, I promise I have used that code and tried different values but it doesnt want to move: Perhaps I am doing something wrong, here is what I did:

I posted the code below into the custom CSS area:

#primary_menu { position: absolute !important; top: 8px !important; left: 100px !important; }

The value I played with is what comes after the "left: ..."
I have tried: -100, -500, 100, 200, 0, -50, 50 .... none of them moves the menu?

Sorry if I am doing it wrong, perhaps you can see where I am going wrong.

This is the code from my style css for the menu, perhaps I changed something there that is causing the problem:

===============================================================================================================
03. MENU
=============================================================================================================== */

#primary_menu{position:absolute;top:8px;right:0;text-shadow: 0 0px 0px rgba(0,0,0,0);}
.jqueryslidemenu{position:relative;z-index:2000;line-height:25px;letter-spacing: 0.5px;text-transform:none;}
.jqueryslidemenu a{display:block;padding:3px;}
.jqueryslidemenu a:hover{color:#b2b2b2;text-decoration:none;}
.jqueryslidemenu ul{margin:0;padding:0;list-style-type:none;float:right;}
.jqueryslidemenu li{padding:5px 10px;float:left;list-style:none;height:45px;position:relative;display:inline;margin:0;}
.jqueryslidemenu ul ul{width:212px;position:absolute;top:20px;padding:4px;margin-left:4px;margin-right:4px;display:block;visibility:hidden;}
.jqueryslidemenu li li{display:list-item;float:none;padding:1px;height:auto;}
.jqueryslidemenu li li a{width:200px;margin:0;height:100%;padding:6px 9px;}
.jqueryslidemenu ul ul ul{margin-top:-5px;z-index:2001;}
.jqueryslidemenu li small{display:none;}

Posted 3 months ago #
Elliott
Support

As I said before you need to add it in your custom CSS section and make sure it has the !important values as seen in my post.

Posted 3 months ago #
bydelight
Member
Which is what I did.

I will show you. Below are screenshots of the following settings showed where it was saved, 200, -200 and -500, as you will see 200 moves it to the right, but -200 or -500 doesnt move it left.
Attachments
200px.jpg (80.2 KB, 3 downloads) 3 months old
minus-500px.jpg (84.1 KB, 3 downloads) 3 months old
minus_200px.jpg (87.1 KB, 4 downloads) 3 months old
Posted 3 months ago #

Webtreats
Support

Hi bydelight,

I went to your site and it looks like you currently have the following in your custom css box:

#primary_menu { left: -500px !important; position: absolute !important;top: 8px !important;}

Try replacing it with this:

#primary_menu { left: -14px !important; position: absolute !important; right: auto!important; top: 8px !important; }

Posted 3 months ago #

bydelight
Member

Yay!!!!! :D it worked, thank goodness... thank you so much for the help Webtreats

Posted 3 months ago #

RSS feed for this topic

Reply

You must log in to post.

Limited time only! The Ultimate WordPress Developer Bundle only $149

Persuasion Sociable Top Header Menu panel customisation

Attachments

Attachments

Reply

Topic Tags

Topic Tags

Quick Links

Support Links

Theme Features

Live Demos

Who's Using Mysitemyway?

Join The Mailing List

Powered By

Follow Us