Docs

[wnhorne246]

I have my wife’s site completed at http://emilycolin.com and I would like to tweak the navbar just a bit and need some help with some CSS.

Right now there are lines in between the individual buttons. What I would like to do is have those lines turn into the same type of effect I have on the top and bottom of the navbar on hover. I believe the effect comes from this line of code…

.x-topbar,.x-logobar,.x-navbar {
    background-color: rgb(0, 69, 100);
    box-shadow: 0 0 20px #000000;
}

The idea is for the buttons to look 3D and pop out at you upon a mouse over. Can this be done?

Thanks

[Joao]

Hi There,

Please add the following code to Appereance Customizer Custom CSS and adjust colors.

.x-navbar .desktop .x-nav > li > a:hover, .x-navbar .desktop .x-nav > .x-active > a, .x-navbar .desktop .x-nav > .current-menu-item > a {
    box-shadow: 0 2px 0 0 #dd3333;
    background: #dd3333;
}

Alternativily if you would like just the border you can try

.x-navbar .desktop .x-nav > li > a:hover, .x-navbar .desktop .x-nav > .x-active > a, .x-navbar .desktop .x-nav > .current-menu-item > a {
    box-shadow: 0 0px 1px 1px;

}

Hope that helps

Joao

[wnhorne246]

Not quite what I was looking for, but it’s in the right ballpark.

I think this gets me closer to what I’m looking for…

.x-topbar,.x-logobar,.x-navbar {
    background-color: rgb(0, 69, 100);
    box-shadow: 0 0 20px #000000;
}

.x-navbar .desktop .x-nav > li > a:hover, .x-navbar .desktop .x-nav > .x-active > a, .x-navbar .desktop .x-nav > .current-menu-item > a {
    box-shadow: 0 0 2px #000000;
}

The only issue with it is I’ve now lost my red underline below the button. Also, is there a way to add the drop shadow to the sub-menu box?

[Jade]

Hi there,

Please use this code instead:

.x-topbar,.x-logobar,.x-navbar {
    background-color: rgb(0, 69, 100);
    box-shadow: 0 0 20px #000000;
}

.x-navbar .desktop .x-nav > li > a:hover, 
.x-navbar .desktop .x-nav > .x-active > a, 
.x-navbar .desktop .x-nav > .current-menu-item > a {
    box-shadow: 0 0px 1px 0px #000000, 0 2px 0 #dd3333;
}

.masthead-stacked .x-navbar .desktop .sub-menu {
        box-shadow: 2px 3px 5px -2px #000;
}

Hope this helps.

[wnhorne246]

Wow, you are very talented! We are sooooo close, I can taste it. Here is the current code that is live right now on http://emilycolin.com. Please check this code for redundancy and that it covers all browsers. I do have a matching gradient .png that is 1px high. I just need to know how to upload it to my installation, and the path it needs to have.

.x-topbar,.x-logobar,.x-navbar,.x-colophon.bottom {
		/* fallback */ 
		background-color: #004564; 
		background-image: url(images/radial_bg.png); 
		background-position: center center; 
		background-repeat: no-repeat; 
		/* Safari 4-5, Chrome 1-9 */ 
		background: -webkit-gradient(radial, center center, 0, center center, 460, from(#004564), to(#0079B2)); 
		/* Safari 5.1+, Chrome 10+ */ 
		background: -webkit-radial-gradient(circle, #004564, #0079B2); 
		/* Firefox 3.6+ */ 
		background: -moz-radial-gradient(circle, #004564, #0079B2); 
		/* IE 10 */ 
		background: -ms-radial-gradient(circle, #004564, #0079B2);
  	border-color: #00334B;
    box-shadow: 0 0 20px #000000;
}

.sub-menu {
		/* fallback */ 
		background-color: #004564; 
		background: url(images/linear_bg_2.png); 
		background-repeat: repeat-x; 
		/* Safari 4-5, Chrome 1-9 */ 
		background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#004564), to(#0079B2)); 
		/* Safari 5.1, Chrome 10+ */ 
		background: -webkit-linear-gradient(top, #004564, #0079B2); 
		/* Firefox 3.6+ */ 
		background: -moz-linear-gradient(top, #004564, #0079B2); 
		/* IE 10 */ 
		background: -ms-linear-gradient(top, #004564, #0079B2); 
		/* Opera 11.10+ */ 
		background: -o-linear-gradient(top, #004564, #0079B2); 
		box-shadow: 0 0 20px #000000;
}

.x-navbar .desktop .x-nav > li > a:hover, .x-navbar .desktop .x-nav > .x-active > a, .x-navbar .desktop .x-nav > .current-menu-item > a {
    box-shadow: 0 0 2px #000000;
}

.x-navbar .desktop .x-nav>li:first-child>a {
    border-left: none !important;
    border-right: none !important;
}

.x-navbar .desktop .x-nav>li>a {
    border: none !important;
}

/*Footer icon/menu CSS */
.x-colophon.bottom .x-social-global a {
    font-size: 3rem;
    height: 40px;
    line-height: 40px;
    width: 40px;
    color: #f7ebb8;
}

footer.x-colophon.bottom a:hover {
	color: #DFCF8B;
}

.x-colophon.bottom,
.x-colophon.bottom .x-nav li a,   /* footer menu  */
.x-colophon.bottom .x-colophon-content,
.x-colophon.bottom .x-colophon-content a {    /* content links */
    color:#f7ebb8;
}

.x-navbar .desktop .x-nav > li > a:hover, 
.x-navbar .desktop .x-nav > .x-active > a, 
.x-navbar .desktop .x-nav > .current-menu-item > a {
    box-shadow: 0 0px 5px 0px #000000, 0 2px 0 #DFCF8B;
}

.masthead-stacked .x-navbar .desktop .sub-menu {
        box-shadow: 2px 3px 5px -2px #000;
}

This is absolutely perfect, except one thing. Can we have the lines on the left and right of the hover state be just for that button? Another words, if you were on the home page, and not hovering over a button, the home button would be surrounded by the lines. But if you hover over another button, the lines show up around that button and disappear from the home button, until the hover is not there. or another button replaces the home button, and takes it’s place, by a click/selection.

Let me know if you need more info on that one. Kinda out there… 😉

[Rad]

Hi there,

You should upload it on your child theme’s folder, example, /wp-content/themes/x-child/images/, then change your CSS to something like this,

background-image: url(//www.emilycolin.com/wp-content/themes/x-child/images/radial_bg.png);

About the button, that’s kind of little confusing 🙂 Do you mean to only display box shadow on hover and not on active status?

Thanks!

[wnhorne246]

Okay. I have uploaded the gradient png to that location and changed the URL to match. What should the background-repeat: be set to since the png is only 1px high? Right now it’s set for background-position: center center; and background-repeat: no-repeat;. This is a middle out gradient by the way. I guess I need to come up with something for the sub-menu too as it’s a top to bottom gradient.

Sorry about the confusion with what I’m trying to do with the buttons. Let me try that one more time.

The look and feel I’m going for would only have one button display the box-shadow at any one time. Say you were on the home page and not hovering over any buttons. I’d like for the home page button to have the box shadow in this case since that is where you are in the site. As soon as you hover over another button though, the home button’s box shadow would change places with whatever button you were hovering over. If you do not click any buttons and stop hovering, the box shadow would return to the home button in this scenario. Now if you do click another button, that button would be active and take the place of the home button and have the box shadow on it by default, unless there is another hovering state.

Let me know if you would like me to throw together some images to explain better.

[Christopher]

Hi there,

The background is displaying fine.
In regards with navbar button, you currently achieved the style, do you confirm? pleas see the attachment.

Thanks.

[wnhorne246]

No, I did not achieve the style I’m looking for. See the attached image. In the image you’ll see that if you hover over say “Books,” the drop shadow is active on “Books” and “Home” since home is the page we’re on. What I would like is only “Books” to have this drop shadow while hovering over that button, but if you stop hovering, the box shadow would return to “Home”. Then, if you “Clicked” on another button to change pages, that button would take the place of “Home” and have a drop shadow by default, unless another button is being hovered over. This way, there is only one button that would ever have a drop shadow around it, at any one time.

As far as the background is concerned, I know it’s displaying fine for most browsers, but I’m trying to set this up for “ALL” browsers. I have the 1px png image where it needs to go. I just need to know what the repeat should be set at to display a smooth gradient for browsers that do not support gradients. Also, my original question was also asking to check my code to ensure it covers all the bases for all browsers. Can you please confirm this?

[Rue Nel]

Hello There,

Thank your for the clarification. To make changes with the shadows as you hover the menu items and the current menu item, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

.site .x-navbar .desktop .x-nav:hover > .x-active > a, 
.site .x-navbar .desktop .x-nav:hover > .current-menu-item > a {
    box-shadow: none;
    transition: all 0.5s linear;
}

.site .x-navbar .desktop .x-nav:hover > .x-active > a:hover, 
.site .x-navbar .desktop .x-nav:hover > .current-menu-item > a:hover {
    box-shadow: 0 0px 3px 0px #000000, 0 2px 0 #f7ebb8;
    transition: all 0.5s linear;
}

At the moment, the background image will not display because you have not uploaded or inserted the correct image path. http://www.emilycolin.com/wp-content/themes/x-child/images/radial_bg.png doesn’t exist. Please supply the correct image path or upload the radial_bg.png in your child theme’s images folder. You might need to create this folder via ftp.

Hope this helps.

[wnhorne246]

That worked great. One question though. The “Books” button is the only button that has a sub-menu. Is it possible to keep the box shadow around the Books button while hovering above the sub-menu? Also, I did change the transition time to 0s. I hope that was okay?

Here is my updated CSS that styles the header and footer. Please check it for mistakes, redundancy, and anything else it needs for browser support.

/* Scroll Bottom above Mastgehead */

.x-slider-scroll-bottom {
    color: #f7ebb8;
}

.x-slider-scroll-bottom:hover {
    color: #DFCF8B;
}

/* Header and Footer */

.x-topbar,
.x-logobar,
.x-navbar,
.x-colophon.bottom {

    /* fallback */
    
    background-color: #004564;
    background-image: url(//www.emilycolin.com/wp-content/themes/x-child/images/radial_bg.png);
    background-position: center center;
    background-repeat: no-repeat;
	
    /* Safari 4-5, Chrome 1-9 */
    
    background: -webkit-gradient(radial, center center, 0, center center, 460, from(#004564), to(#0079B2));
	
    /* Safari 5.1+, Chrome 10+ */
    
    background: -webkit-radial-gradient(circle, #004564, #0079B2);
	
    /* Firefox 3.6+ */
    
    background: -moz-radial-gradient(circle, #004564, #0079B2);
	
    /* IE 10 */
    
    background: -ms-radial-gradient(circle, #004564, #0079B2);
    border-color: #00334B;
    box-shadow: 0 0 20px #000000;
}

.sub-menu {

    /* fallback */
    
    background-color: #004564;
    background: url(//www.emilycolin.com/wp-content/themes/x-child/images/linear_bg.png);
    background-repeat: repeat-x;
	
    /* Safari 4-5, Chrome 1-9 */
    
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#004564), to(#0079B2));
	
    /* Safari 5.1, Chrome 10+ */
    
    background: -webkit-linear-gradient(top, #004564, #0079B2);
	
    /* Firefox 3.6+ */
    
    background: -moz-linear-gradient(top, #004564, #0079B2);
	
    /* IE 10 */
    
    background: -ms-linear-gradient(top, #004564, #0079B2);
	
    /* Opera 11.10+ */
    
    background: -o-linear-gradient(top, #004564, #0079B2);
    box-shadow: 0 0 2px #000000;
}

.x-navbar .desktop .x-nav > li > a:hover,
.x-navbar .desktop .x-nav > .x-active > a,
.x-navbar .desktop .x-nav > .current-menu-item > a {
    box-shadow: 0 0 2px #000000;
}

.x-navbar .desktop .x-nav>li:first-child > a {
    border-left: none !important;
    border-right: none !important;
}

.x-navbar .desktop .x-nav > li > a {
    border: none !important;
}

/* Mobile Navbar */

.x-btn-navbar,
.x-btn-navbar:hover {
    color: #f7ebb8;
}

.x-btn-navbar.collapsed,
.x-btn-navbar.collapsed:hover {
    color: #DFCF8B;
}

/*Footer icon/menu CSS */

.x-colophon.bottom .x-social-global a {
    font-size: 3rem;
    height: 40px;
    line-height: 40px;
    width: 40px;
    color: #f7ebb8;
}

footer.x-colophon.bottom a:hover {
    color: #DFCF8B;
}

.x-colophon.bottom,
.x-colophon.bottom .x-nav li a, /* footer menu  */
.x-colophon.bottom .x-colophon-content,
.x-colophon.bottom .x-colophon-content a { /* content links */
    color: #f7ebb8;
}

.x-navbar .desktop .x-nav > li > a:hover,
.x-navbar .desktop .x-nav > .x-active > a,
.x-navbar .desktop .x-nav > .current-menu-item > a {
    box-shadow: 0 0px 3px 0px #000000, 0 2px 0 #f7ebb8;
}

.masthead-stacked .x-navbar .desktop .sub-menu {
    box-shadow: 2px 3px 5px -2px #000;
}

.site .x-navbar .desktop .x-nav:hover > .x-active > a, 
.site .x-navbar .desktop .x-nav:hover > .current-menu-item > a {
    box-shadow: none;
    transition: all 0s linear;
}

.site .x-navbar .desktop .x-nav:hover > .x-active > a:hover, 
.site .x-navbar .desktop .x-nav:hover > .current-menu-item > a:hover {
    box-shadow: 0 0px 3px 0px #000000, 0 2px 0 #f7ebb8;
    transition: all 0s linear;
}

As far as the background image was concerned, somehow I had .png.png in the name of both images. Whoops! I have corrected the two I have in that folder now. I just need to know how to implement them within the above code.

The first image is for the navbar. The image (http://emilycolin.com/wp-content/themes/x-child/images/radial_bg.png) is 2000px width by 1px height. The second image is for the sub-menu. That image (http://emilycolin.com/wp-content/themes/x-child/images/linear_bg.png) is 1px width by 111px height.

One last question too. The social icons in the footer. I have them styled as a whole right now, but is it possible to style each hover to be the actual color of the true icon? (Facebook might have a color of #3B5998, for example).

To recap…

1. Can the “Books” button keep it’s box-shadow while hovering over the sub-menu?
2. Was it Okay to change the transition to 0s on your last bit of code?
3. Is there any corrections, cleanups, or additions needed for my updated CSS?
4. Now that I have fixed the gradient images, how do I implement them? (Have a feeling this will have something to do with the repeat value).
5. Can you give me the CSS to change the individual social icons’ color on hover?

[Rue Nel]

Hello There,

Thanks for the updates!

1] To keep the shadow in “Books” menu item while hovering the submenu, please update the given code from my previous reply and make use of this code instead:

.site .x-navbar .desktop .x-nav:hover > .x-active > a, 
.site .x-navbar .desktop .x-nav:hover > .current-menu-item > a {
    box-shadow: none;
    transition: all 0.5s linear;
}

.site .x-navbar .desktop .x-nav:hover > .x-active:hover > a,
.site .x-navbar .desktop .x-nav:hover > .x-active > a:hover, 
.site .x-navbar .desktop .x-nav:hover > .current-menu-item > a:hover{
    box-shadow: 0 0px 3px 0px #000000, 0 2px 0 #f7ebb8;
    transition: all 0.5s linear;
}

2] Yes it is okay. You can try having 0s or simply remove the entire line like transition: all 0.5s linear;

3] So far all the css is valid and correct. It is also in order.

4] To fully understand how background gradient and background repeat works, please check it here:
http://www.w3schools.com/css/css3_gradients.asp
http://www.w3schools.com/cssref/pr_background-repeat.asp

5] These are the css for the social icons:
for the sidebar:

.site a:hover .x-icon-facebook-square {
    color: #000 !important;
}

.site a:hover .x-icon-twitter-square {
    color: #000 !important;
}

.site a:hover .x-icon-instagram {
    color: #000 !important;
}

.site a:hover .x-icon-rss-square {
    color: #000 !important;
}

For the social icons in the footer:

.site .x-colophon.bottom .x-social-global a:hover .x-icon-facebook-square {
    color: #000 !important;
}

.site .x-colophon.bottom .x-social-global a:hover .x-icon-twitter-square {
    color: #000 !important;
}

.site .x-colophon.bottom .x-social-global a:hover .x-icon-instagram {
    color: #000 !important;
}

.site .x-colophon.bottom .x-social-global a:hover .x-icon-youtube-square {
    color: #000 !important;
}

.site .x-colophon.bottom .x-social-global a:hover .x-icon-rss-square {
    color: #000 !important;
}

Hope this helps.

[Author]

Posts