Center logo image on all screens

Support
#1

Hello, I wanted to make the logo image transparent but full opacity on hover. We came up with this code:

.x-brand.img {
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}

a:hover.x-brand.img {
opacity: 1;
filter: alpha(opacity=100); /* For IE8 and earlier */
}

Now I just need help with centering the image on all screens. Can anyone suggest a work around to center the logo image on all screens?

Thanks in advance. The site is at https://mredsanders.net if you care to have a look…

#2

Hey @mredsanders,

I am getting following error on given URL.

Can you please check?

Regards

#3

Yes, my site was down but it should be loading now. Sorry for the inconvenience. My hosting is experiencing technical difficulties.

Regards and thanks for looking.

Ed Sanders

My account got flagged as posting too many times for a newcomer, so sorry for the delay in responding. I had to wait 2 hours to post again.

By now my page should load. Thanks!

#4

What I tried was adding left-margin attribute to push it to the right, this doesn’t look so good on mobile version though

#5

Please use the Stacked header layout as it is will already be centered out of the box. Making this centered using the Inline layout will require custom development which is outside of our support.

Thanks.

#6

Hello,

Using the stacked header works for the image, but my custom css is thrown off, giving me a background on the logobar and a second one on the navbar. Here is what I have:

.x-logobar, .x-navbar-wrap {
/* For Safari 5.1 to 6.0 /
background: -webkit-linear-gradient(left top,red,orange,yellow,green,blue,indigo,violet);
/ For Safari 5.1 to 6.0 /
background: -o-linear-gradient(bottom right,red,orange,yellow,green,blue,indigo,violet);
/ For Opera 11.1 to 12.0 /
background: -moz-linear-gradient(bottom right,red,orange,yellow,green,blue,indigo,violet);
/ For Firefox 3.6 to 15 /
background: linear-gradient(to bottom right,red,orange,yellow,green,blue,indigo,violet);
/ Standard syntax (must be last) */
}

Can you suggest an edit to get the backgrounds the same again?

Many thanks for the tip. Regards, Ed Sanders

#7

OK working on my own I changed the nav bar code a little, to make just the three colors that are touching the logobar to show. But how do I remove the white line in the middle that separates the logobar from the navbar?

Many thank you’s for looking. Regards, Ed Sanders

Update: Got it working with border-bottom set to 0px on the logobar. Many thanks for looking! Regards, ,Ed

#8

Glad everything is working fine now.

#9

Just FYI, after some constructive feedback, I removed the rainbow header, although it’s good to know how to do this. Appreciate all your help! Regards, Ed Sanders

#10

Thank you!