Docs

[Johanschack]

Hey guys, i would like to make my header on the transparent, and only include my logo image, and a “subscribe to newsletter” button.

1) through the child theme, where and what should i add something, that makes it transparent, only on one URL (http://jvfirst.dk/blog/) and all blog posts? I’d guess that the easiest way would making something for the blog posts on child theme, and add css to that page’s css file?

2) How do i only display the logo?

3) Which plugin, included in the x-theme should i use, that would create a pop-up to subscribe a newsletter? is it the convertplug? if so, how do i add a “subscribe” button in the header, only for 1 URL, and the blog post pages?

Thanks for your awesome and valuable help.

Best regards,
Johan

[Johanschack]

for #3, i have figured out how to trigger a pop-up with convertplug by the click of a button, with a certain ID.

However, i need to figure out how i can add a button to the header. The button style i would like to achieve is similar to the one on this page (top right): http://blog.invisionapp.com/chatbots-prototyping-tool/

how do i add such a button to the header, and how do i give it an ID?

Thanks in advance!

[Friech]

Hi There,

Thanks for writing in! #1 You can add the custom CSS below on your child theme’s style.css file.

.page-id-373 .x-navbar,
.single-post .x-navbar {
	background-color: transparent;
	border-bottom-width: 0;
}

#2 You mean hide the menu and display only the logo? Add this on your custom CSS.

.page-id-373 .x-nav-wrap.desktop,
.single-post .x-nav-wrap.desktop {
	display: none;
}

#3 You can add this on the topbar content. (Customizer > Header > Topbar Content)

<a id="#" class="x-btn x-btn-transparent x-btn-rounded x-btn-mini" href="#example" title="Example">Subscribe</a>

Hope it helps, Cheers!

[Johanschack]

Hi,
unfortunately this did not work. Let me explain it better. on my blog posts and the /blog page, i would like a transparent header, only including my logo, and a button.

I would prefer if the solution was through my child theme, instead of in global CSS. unless of course this is the same. The reason for this, is that i dont want the page to load some content, and then hide it again afterwards.

Would an alternative solution be, creating a new menu, and then editing it?

[Johanschack]

The transparent header might be working now, but the slider beneath is should be pushed up. how can i fix this? you can see the post here: http://jvfirst.dk/this-is-a-test-blog/

I still need help with the button too 🙂

Thanks!

[Johanschack]

I found a piece of code from another forum post, and edited it a bit:

.single-post .x-slider-container.below {
    margin-top: -60px;
}

Is this correct? and will it only affect my blog posts?

[Lely]

Hi There,

Correct. That will only affect slider below the menu on your single post.

Cheers!

[Johanschack]

Hey!

I still need help on how i can add a button to the header, right side. I would like to have this kind of “subscribe” button, that triggers a convertplug pop-up:

http://blog.invisionapp.com/digital-telepathy-collaboration/

I would like the button to show in the header, not a topbar, on the page with an ID=373 and all my blog posts. You can see my current page here: jvfirst.dk/blog/this-is-a-test-blog/

[Jade]

Hi there,

Please add this code in the custom JS:

jQuery(".single-post .x-navbar-inner .x-container").append('<a id="theId" href="#hello">HOI</a>');

Then add this in the custom CSS:

a#theId {
    float: right;

    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    margin-left: 15px;
    color: #fff;
    border: none;
    padding: 12px 17px;
    border: 1px solid #fff;
    text-transform: none;
    font-size: 14px;
    font-weight: 700;
    font-family: "Open Sans", "open-sans", sans-serif;
}

Hope this helps.

[Johanschack]

Thanks,

It seems to be working, now ill just have to tweek it 🙂

Have a nice day, and again; thank you for your awesome support.

[Johanschack]

Sorry,

I’m having some trouble.

How do i vertically align the button? right now, it’s touching the top of the nav bar, instead of being in the middle of it.

Thanks in advance.

[Joao]

Hi There,

Can you provide a screenshot of what you are referring to?

Let us know,

Joao

[Johanschack]

Sure,

Here’s a screenshot. I found a temporary fix, but it is not a responsive one, so i would like to know how to vertically align it in the nav bar.

Thanks

[Rupok]

Hi there,

Is it on different page? I can’t seem to find that on your site. Would you provide the exact URL?

Thanks!

[Johanschack]

Hi, it’s on jvfirst.dk/blog

Thanks.

[Author]

Posts