Docs

[ocsweb]

website: http://nlwebdesign.com/securefence
Example single post: http://nlwebdesign.com/securefence/hello-world-2/

Main Navbar Background / Single Posts
I have the customizer navbar spacing at 0px because I am using custom sections for the top background on pages. I have no control over the single post page top section backgrounds like I do on the normal pages. I would like to add a single post background to the navbar with 250px height. I don’t want that background to follow when scrolling – similar to the effect I have on normal pages like: http://nlwebdesign.com/securefence/fencing/

Sub Menu
I would like to make changes to the drop down sub menu. It looks terrible. I would like the spacing the be symmetrical, background with the same opacity as the menu background, and sub menu items to be white.

[Rahul]

Hey There,

You should use .single-post selector to target post pages.
Please let us know how you want navbar on post pages so we can help you.

Thanks.

[ocsweb]

I want there to be an image background on the navbar with height of 250px fullwidth on post pages.

[Lely]

Hi There,

Please add the following code on Appearance > Customize > Custom > Edit Global Javascript

(function($){
  $('<div class="single-header"></div>').insertAfter('.masthead.masthead-inline');
 })(jQuery); 

Also add this on Appearance Customize > Custom > Edit Global CSS

.single-header {
    background: url(http://nlwebdesign.com/securefence/wp-content/uploads/2016/06/wood-fence-cta.jpg) center center no-repeat;
    background-size: cover;
    height: 250px;
}

Hope this helps.

[ocsweb]

This goes through the whole site, and I don’t want that. I want it to be for blog and single post pages only.

Please advise. Thank You.

[ocsweb]

Clarrification: Blog and single posts only. Not pages.

[Nabeel A]

Hi again,

Try replacing the CSS code with this one:

.blog .single-header, .single .single-header {
    background: url(http://nlwebdesign.com/securefence/wp-content/uploads/2016/06/wood-fence-cta.jpg) center center no-repeat;
    background-size: cover;
    height: 250px;
}

Let us know how this goes!

[ocsweb]

This works great. Thank you.

Next problem is the drop down sub-menu. I would like the menu to look similar to the actual menu, same dark partial opactity with white text and better symmetrical spacing. It looks terrible right now.

Please advise. Thank you.

[Rad]

Hi there,

Please add this CSS as well,

.x-navbar .desktop .x-nav > li ul {
    top: 60px;
    padding: 0px;
    background-color: rgba(34,34,34,0.4);
}

Then change this CSS,

.x-navbar #menu-item-107 a {
    background-color: rgba(34,34,34,0.4);
    color: #fff;
    padding: 25px 10px 35px 10px !important;
}

to this,

.x-navbar #menu-item-107 > a {
    background-color: rgba(34,34,34,0.4);
    color: #fff;
    padding: 25px 10px 35px 10px !important;
}

Hope this helps.

[ocsweb]

Yes. Looks good. I just need the .x-navbar-fixed-top scrolling version to show the same.

[Christopher]

Thanks for writing in! Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

[ocsweb]

The same way the drop down menu looks at the top is the same way I want it to look when I begin to scroll.

[Rad]

Hi there,

Please remove this

padding: 25px 10px 35px 10px !important;

Not sure why it has different effect when the selector is just the same.

Thanks!

[ocsweb]

Where am I removing that from? Can you please show me the entire CSS that I need to change. Thank You.

[Friech]

Hi There,

Sorry for the confusion. Please clarify your request first. The drop down menu is already look the same with on top and on scrolled.

Thanks.

[Author]

Posts