[jmuskusParticipant]

Hi,

I am very new to WordPress but am really enjoying slowly getting to grips with it!! I am now trying to recreate a site that I initially put together on a drag drop site builder to see how it looked. This link should work: http://jomuskus.wix.com/working-title

A couple of questions:

1. Is it possible with some customization to make the top bar or logo bar look like this i.e. logo to left and contact info and social icons to right?

2. Secondly is it possible when you hover over the different menu items for it to be a block of colour rather than just the text to change colour?

Looking forward to hearing from you, please remember I am a beginner!! Have just done a course on Codecademy so I am beginning to understand and get to grips with basic code!

[ChristopherModerator]

Hi there,

#1 Yes you can put your contact info and social bar in Topbar (you can do it under Customize -> Header and navigate to MISCELLANEOUS and enable Topbar). Then we can give them float with CSS.

#2 It is also possible.please provide us with URL of your website so we can suggest you appropriate CSS codes.

Hope it helps.

[jmuskusParticipant]

Thanks for your prompt reply!! My URL is http://www.genevamountaintransfers.com. I have a coming soon page enabled at the moment, do I need to deactivate it for you to be able to have a look?

[ChristopherModerator]

You can send us your login credential if you want to keep your site in maintenance mode.

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thank you

[jmuskusParticipant]

This reply has been marked as private.

[jmuskusParticipant]

So I have put some contact info in my top bar but is there away to stack it vertically with the social icons rather than horizontally?
Also what is the best way to add my logo to the top bar?

Many thanks.

[CousettMember]

You can add your logo to the header area under the customizer -> Header

To align both the social icons and topbar to the try right adding the following CSS under Appearance -> Customize -> Custom -> CSS

.x-topbar .p-info {
float: right;
margin: 0px 0px 0px 20px;
}

I hope this helps!

[jmuskusParticipant]

Thanks but I would like the email and phone number and social icons bar to be one on top of the other not in line, is this possible?
Should the logo appear in the top bar? I have uploaded one but it is not appearing anywhere on the screen…

[MrinalMember]

Hi There,

Check your site now, I’ve add your Phone no. & email info with html tags so they’re showing fine as you wanted. 🙂

The logo can be shown in Topbar too, but you need some html & CSS customization for it.

Please tell me where your logo image? (Direct URL) & where in top bar you want to show it. I’ll be glad to help.

Have a nice day, Cheers!

[jmuskusParticipant]

Hi, wow that is great, thankyou, is it possible to have the social bar under the contact info too? I can see the html you did to place the contact info using firebug and would love to be able to do it myself. If I edit the original html in the theme files how do I then get these changes to upload to the site if that makes sense?! Sorry for all the questions this is a long learning curve but I am enjoying it so far!!

[ChristopherModerator]

I just made changes.Icons are below contact information.
any changes you make will be save in theme it doesn’t matter if you are working offline or online.

Hope it helps.

[jmuskusParticipant]

Ah is this what i need an ftp client for?! This may be where I am going wrong!!!

[CousettMember]

The FTP client allows you to make changes locally on your computer and then upload them to the server so that it is visible to the general public from your URL. I hope this helps explain the functionality.

[jmuskusParticipant]

So to edit the html, I do it locally on my computer and then the FTP client uploads it to my site? Does it work vice versa? For example the html changes you made to my site, where are they currently stored?!

[CousettMember]

They are stored on the server. HTML changes that you can do in Firebug are best done by editing the page and changing the content of the page. I hope this helps.

[Author]

Posts