Need some help with header

Hi djshortkut!

1- Please go to Enfold theme options > Header Layout > Extra Elements and add following lines to “Phone Number or small info text”

<span class="av-icon-char" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span>Your number here | <span class="av-icon-char" aria-hidden="true" data-av_icon="" data-av_iconfont="entypo-fontello"></span>  (Email address hidden if logged out) 

2- Can you post the link to your website please?

Cheers!
Yigit

Hi!

1- You just need to simply adjust HTML. Please see – http://www.w3schools.com/html/tryit.asp?filename=tryhtml_mailto
2- Please add following code to Quick CSS in Enfold theme options under General Styling tab

@media only screen and (max-width: 480px) {
#header_meta .container { width: 100%; }}

3-

.phone-info span { margin-left: 0; padding-left: 0; }

4- Please add your text to the end of “Phone Number or small info text” field in Enfold theme options > Header Layout > Extra Elements inside a div as following

<div class="my-custom-text">License 123-1234-51-23</div>

Then add following code to Quick CSS

.phone-info { width: 100%; }
.my-custom-text { float: right; }

Regards,
Yigit

Hi!

Thank you for the screenshot.

You can add this:

.my-custom-text {
position: absolute;
top: 5px;
right: 0;
}

Best regards,
Ismael

Hi!

Thank you for the screenshot.

Add this at the very bottom:

@media only screen and (max-width: 767px) {
.my-custom-text {
position: relative;
top: 8px;
margin: 0 auto;
}

#header_meta {
min-height: 60px;
}
}

Cheers!
Ismael

Hi!

Please add following code to Quick CSS to remove the text on screens smaller than 767px

@media only screen and (max-width: 767px) {
.my-custom-text { display: none !important; }}

Best regards,
Yigit

Hi!

You are welcome, glad if we could help :)

Best regards,
Yigit