Docs

[JW & Co.]

Hello,

I am trying to add the custom headline “The Treasure Coast of Florida” in the upper right hand part of the image at the top of webdeveloperandseo.joshuaweatherstone.com. It should look exactly like the exact same phrase at the top of webdeveloperandseo.com. I am transferring the site to WP.

Thanks in advance for your help!

*I wish that the navbar/menu were an element that could be placed wherever you want on a page so that cornerstone could be used to add images in the masthead with text on top. Please pass this on to the development team. 🙂

[Rupok]

Hi there,

How did you add the custom header image? You can add the text in same way and add some CSS to position them. We can assist you to position and style it, let’s add it there with/below the image.

Cheers!

[JW & Co.]

Hello Rupok,

This is the javascript I used:
/*Place Image Above Navbar*/
(function($){
$(‘<div class=”custom-header-image” style=”text-align: center;”></div>’).insertBefore( $(‘.x-navbar-wrap’) );
})(jQuery);

What would I need to add to it to achieve what we discussed above?
Thanks!

[JW & Co.]

Apparently this part of the code was converted to that image…sorry about that!
<img class="x-img mtn mbn x-img-none" src="http://webdeveloperandseo.joshuaweatherstone.com/wp-content/uploads/2016/11/Wallpaper3.jpg">

[Friech]

Hi There,

There is a topbar (above navigation) option on the Customizer > Header that you can enable where you can add the image banner and the tagline instead of the JavaScript that you’re using.

Please add this HTML markup on your Topbar Content, and we will style it to position the tagline.

<div class="banner-container">
<img class="x-img mtn mbn x-img-none" src="http://webdeveloperandseo.joshuaweatherstone.com/wp-content/uploads/2016/11/Wallpaper3.jpg" /><span class="tagline">"The Treasure Coast of Florida"</span>
</div>

Please clarify how do you want this tagline to be position and style. A mock-up/screenshot design would be appreciated.

Thanks.

[JW & Co.]

Hello,

I will wait to add your code until you have provided the additional code.

If you simply scroll back up to my very first post in this thread, you will find an example and instructions regarding position and style.

Thoroughness is appreciated,
Josh

[Rupok]

Hi Josh,

So you want the exact style from your previous site (http://webdeveloperandseo.com/)? Kindly enable Topbar and place the suggested content within Topbar Content so that we can tailor the perfect code for your site.

Cheers!

[JW & Co.]

Yes, that is the style I want, except that the image is cut off a little in the original, and I want the full image. Please let me know how to style it.

Just in case it’s pertinent, this is the code I removed in favor of using the topbar:

/*Place Image Above Navbar*/
(function($){
  $('<div class="custom-header-image" style="text-align: center;"><img class="x-img mtn mbn x-img-none" src="http://webdeveloperandseo.joshuaweatherstone.com/wp-content/uploads/2016/11/Wallpaper3.jpg"></div>').insertBefore( $('.x-navbar-wrap') );
})(jQuery);

Thanks!

[Rupok]

Hi there,

Thanks for writing back. Let’s add this under Custom > CSS in the Customizer.

.x-topbar-inner.x-container {
  max-width: 100%;
  width: 100%;
}

.banner-container img {
  display: block;
  margin: 0;
  width: 100%;
}

.banner-container .tagline {
  color: #c60;
  font-size: 22px;
  position: absolute;
  right: 125px;
  text-align: center;
  top: 150px;
}

@media only screen and (min-width: 1170px) and (max-width: 1500px) {
.banner-container .tagline {
  font-size: 20px;
  right: 95px;
  top: 130px;
}
}

@media only screen and (min-width: 1024px) and (max-width: 1169x) {
.banner-container .tagline {
  font-size: 16px;
  right: 70px;
  top: 95px;
}
}

It could have done more easily if you just add the text to the image just under the logo. It would be more responsive across the browser size.

Thanks!

[JW & Co.]

Hello,

I am just getting around to using this code, and am noticing a white border beneath the topbar image on webdeveloperandseo.joshuaweatherstone.com.

I decided to add the text to the image as you previously suggested:

<div class="banner-container">
<img class="x-img mtn mbn x-img-none" src="http://webdeveloperandseo.joshuaweatherstone.com/wp-content/uploads/2016/11/Chris-Anicich-Advertising.jpg">
</div>

How would I go about removing that white border?

Thanks.

[Jade]

Hi there,

Please add this code :

p:empty {
    display: none;
}

.x-topbar .x-social-global {
    margin-top: 0;
}

Hope this helps.

[JW & Co.]

Hello,

This is almost there, but your code still leaves a small tan border above the navbar at the top of verobeachwebsitedesign.net. How can I remove it?

Thanks!

[Joao]

Hi There,

I can´t see any border, can you provide a screenshot and also let us know which browser and device you are using while experiencing the issue?

Thanks

Joao

[JW & Co.]

So sorry, I referenced the wrong website.

The website with the small tan border above the navbar is webdeveloperandseo.joshuaweatherstone.com.
Here is a screenshot of the issue: http://prnt.sc/dd0quc.

Thanks.

[Paul R]

To remove background, you can add this in Custom > Edit Global CSS in the customizer.

.x-topbar {
    border-bottom:0;
}

Hope that helps.

[Author]

Posts