[Mandala528]

Hi,

I would like to add a phone number to the header, preferably above the dropdown menu in the top right corner, but without adding another header.

The Header Right Sidebar widget actually places text in the middle of the Header and that does not work because it pushes my logo higher up and out of alignment.

If I use the Header Top Sidebar widget, it gets put way up top and out of sight with it’s own header so that doesn’t work.

Do I have an alternative? My site is:
http://dev.stoneagect.com/

Thank you for your help!
-Mandala528

[Pratik]

Hi @Mandala528,
This is little advance question and I would like to leave this to be answered by Sakin. He is on travel for WordCamp US. So, you might get reply little late.

[Sakin]

@Mandala528: I see that you have already added in Phone number in header top sidebar. Then you can add the following css in “Appearance => Theme Options => Custom CSS” box to make that bar white, text align right and remove padding. I hope this works for you.

#header-top {
    background-color: #fff;
}
#header-top .container {
    padding-right: 35px;
    text-align: right;
}
#masthead {
    padding-top: 0;
}

[Mandala528]

Hi Sakin,

Thank you; that does work!

However, in responsive for mobile, the number gets pushed above the logo. Is there a way to move it to the right of the logo in responsive for mobile viewing?

Your help is appreciated!

Namaste,
Mandala528

[Sakin]

@Mandala528: If if you want to do that then, you need to add that phone number in Header Right Sidebar instead of Header Top Sidebar.

[Mandala528]

Hi Sakin,

I had already tried that, but didn’t like how close it was to my main navigation.
This is a better place for it because it does not disappear when you scroll down like it did when i used “Top Sidebar.”

I would prefer if the number was more centered between the logo and the dropdown menu. Is there a padding code I can use to accomplish this?

Also, the number disappears when viewed in mobile. Is there a code I can enter to prevent that from happening?

Thank you,
Mandala528

[Sakin]

@Mandala528:
1. For padding, following is the example on how you can add in padding left and right as per your need. So, change it as per your need and then add it in your Custom CSS box:

#header-right #text-5.widget { 
    padding-left: 2px; 
    padding-right: 5px; 
}

2. For mobile view to show phone number, you can add the following css in your custom css box:

@media screen and (max-width: 980px) {	
    #header-right #text-5.widget { 
        display: block;
        padding: 0; 
    }
    #header-left {
        width: 100%;
    }
    #header-right {
        width: 100%;
    }
}

[Mandala528]

Hi Sakin,

The code you supplied forced the contact number and dropdown menu below the logo so it does not all fit in one even line. Is there a way to push the logo farther to the left to make it all fit?

Thanks for trying,
Mandala528

[Sakin]

@Mandala528: Now for that you can change the width as per your need. in the above css change the width of header-left and header-right. It’s now 100%. Change it as per your need.

[Author]

Posts