Docs

[Steve Taylor]

Hi guys,

I’m wondering if you know an easy way to make the static header look like the one on http://www.itworksllc.net

I like how it has the logo nice and big when you’re at the top of the page with the menu on the right, and then the social links and phone number nice and big in the top bar. Once you scroll down, the logo shrinks so the static header doesn’t take up too much screen real estate, and the phone number goes right next to it. There’s also a nice transition effect when switching between the two.

Any suggestions and help would be greatly appreciated!

[ComplianceSolution]

Following this as I would also like to know the answer.

[Rupok]

Hi there,

Thanks for writing in! That would be possible if you just enable the “Topbar” from Customize > Header and place the content within Topbar Content. You need to add them using HTML and some custom CSS. If you can add the HTML, we can help to adjust the styling.

Cheers!

[Steve Taylor]

To clarify, I said “STATIC” header and I meant “FIXED”. That way when we scroll down you still see the logo and menu on the top.

I’ve added the information to the top bar.

http://www.itworkshosting.com

I’ve got everything up there that I want. I just need to know how to accomplish the following when scrolling down, using the Fixed header:

1: Make the logo smaller. I’d like to use a logo that is 60% of the size that’s currently used.
2: Put the phone number next to the logo. I don’t want the “Contact Us” next to the number.

[Jade]

Hi there,

You can add this under Custom > CSS in the Customizer.

.x-navbar-fixed-top .x-brand {
    width: 40%;
    padding-top: 20px;
}

.x-navbar-fixed-top .x-brand:after {
    content: "(631) 283-2370";
    float: left;
    padding-top: 10px;
    padding-left: 5px;
}

.x-navbar-fixed-top .x-brand img {
    float: left;
    width: 260px;
}

Hope this helps.

[Steve Taylor]

Amazing!

How can I move the stuff I typed for the top header to be on the right of the social icons? Like http://www.itworksllc.net

[Steve Taylor]

I used this code and am ecstatic with how the fixed menu looks!

.x-navbar-fixed-top .x-brand {
    width: 50%;
    padding-top: 20px;
}

.x-navbar-fixed-top .x-brand:after {
    content: "(631) 283-2370";
    font-family: Arial;
  	font-size: 22px;
    color: #333;
    float: left;
    padding-top: 10px;
    padding-left: 5px;
}

.x-navbar-fixed-top .x-brand img {
    float: left;
    width: 260px;
}

[Lely]

Glad you were able to figure this out.

Cheers!

[Steve Taylor]

Thanks, but I still want to know how to move the phone number to be right aligned, on the right of the social icons.

[Joao]

Hi There,

Please add the following code to Appereance > customizer > Custom > CSS

.x-topbar .p-info {
    float: right;
    margin-left: 20px;
    margin-top: 10px;
}

Hope that helps

Joao

[Steve Taylor]

FYI – I tried using this same code on another site I’m working on and it doesn’t look right at all.

http://www.itworkshosting.com/oitvoip

Suggestions?

[Darshana]

Hi there,

Here’s how it renders on my end (https://snag.gy/D0WQaF.jpg). Can you please provide us with a screenshot and explain how you want it to be, so that we can assist you.

Thanks!

[Author]

Posts