[AquorParticipant]

Hi there,

I’d like to add a line above my main header navigation links with some text and social media icons. Here is an example: http://i.imgur.com/x037Nv3.png (http://opendatacon.org/)

What is the best way to accomplish this? Thanks in advance for your help. My website is http://www.aquorwatersystems.com.

[DarshanaModerator]

Hi there,

Thanks for writing in! Please head over to Appearance -> Customize -> Header -> Miscellaneous area and enable Topbar. Once you enable it, you can use Topbar Content area below to add your own HTML.

Similarly you can configure social icons through Appearance -> Customize -> Social section.

Hope that helps.

[AquorParticipant]

Thanks for the tips. I managed to get the effect I was looking for, but I’m having some trouble with the phone number aligning. Here’s the css I’m using:

p.p-info {
float: right;
text-align: right;
width: 92%;
}

Do you know of a better method to align the text directly left of the social icons? It works fine on desktops, but at smaller resolutions this happens: http://i.imgur.com/oinZUvh.png

Also, at what screen size does the condensed menu appear? I’m using this:

@media (max-width: 767px) { .x-topbar { display: none; } }

to make the topbar disappear on mobile but this still happens: http://i.imgur.com/6Oqvo03.png

Thanks!

[JadeModerator]

Hi there,

Please use this CSS to adjust the placement of the text and the social icons in the top bar:

.x-topbar .p-info {
    float: right;
    width: 120px;
}

.x-topbar .x-social-global {
    width: 65px;
    float: right;
}

.x-topbar .x-social-global a,
.x-social-global a i {
    width: 20px;        
}

To hide the top bar in mobile views:

@media (max-width: 979px) {

    .x-topbar { display: none; }

}

Hope this helps.

[AquorParticipant]

Thanks, the responsive functionality works great now, but that CSS flips the phone number and social icons (I’d like to keep the icons to the right).

Also, the 20px icon width causes this with the footer links: http://i.imgur.com/tWRvmmy.png

[LelyModerator]

Hello There,

Glad that the responsive is working now. For the 20px that causing issues with footer, please adjust the following CSS from this:

.x-topbar .x-social-global a,
.x-social-global a i {
    width: 20px;        
}

To this:

.x-topbar .x-social-global a,
.x-topbar .x-social-global a i {
    width: 20px;        
}

Upon checking, the social icons on the topbar stays on the right of the phone number. Can you give us screenshot of what you’re seeing? Thank you.

[AquorParticipant]

Thank you, that bit fixed the footer.

Here’s what the topbar looks like now (phone number on right): http://i.imgur.com/XtIjLBT.png

[RadModerator]

Hi there,

Add this code at Admin > Appearance > Customizer > Custom > Javascript.

jQuery ( function($) {

$('.x-topbar .p-info').appendTo('.x-topbar-inner');

} );

Cheers!

[AquorParticipant]

Everything looking good now, thanks!

PS: Is it possible to activate the expanded demo content without over-riding all my sites’s settings/content? I’d like to see all the shortcodes used to make the ‘Agency’ homepage and use bits on mine.

[RadModerator]

Hi there,

Expanded demo will import a complete demo including settings that may override all of your site settings. It will override your site existing content and setting.

It’s not advisable for existing site. You may try installing a fresh wordpress and import it there. Then just copy and move some content and setup to your main site.

Thanks.

[swillcox1976Participant]

http://www.willcox.ch/Adler/risk-management/?cornerstone=1
How Can i add the line right next to title? our aim—– i want the same for other titles
thanks

[Rue NelModerator]

Hello There,

Thanks for updating this thread! Please edit your page in Cornerstone and in the custom headline element settings, you can enable the accent and align the text to the left. Please see the screenshot below:

Hope this helps.

[swillcox1976Participant]

cool thanks

[swillcox1976Participant]

it changed color, and I dont know how to put it back to blue….
http://www.willcox.ch/AlphaValuePE/wp-admin/customize.php?url=http%3A%2F%2Fwww.willcox.ch%2FAlphaValuePE%2Frisk-management%2F

How Do i do it?

[Rue NelModerator]

Hello Again,

The icons is perfectly working and with the correct color from our end.
http://prntscr.com/9qbz7i

Please clear your plugin cache (if you have installed a caching plugin) and clear your browser’s cache or use Chrome’s incognit mode to test your site again.

If you have any additional questions at this time we kindly ask that you open them up in a separate thread. The longer threads get in the forum, they become more difficult to support as they tend to drift off topic and they also make it troublesome for users trying to search for solutions. Keeping threads relevant to their original inquiry ensures that we can keep better track of what has been resolved and that users can more effectively find answers to similar issues they might be experiencing.

Thanks!

[Author]

Posts