[erikzettParticipant]

I’m having trouble hiding the x-navbar background when collapsing the window to mobile width.

I have chosen to use a background image instead of solid color for the x-navbar.

Here is a screenshot in IE , which appears worse than in Firefox, although you can still see some image.

http://cl.ly/image/1P0p2g1M3A3g

Thanks in advance for any help,

[ChristopherModerator]

Hi there,

The image height is 120px and it’s not appropriate for mobile devices, to hide it, find the following code :

.x-navbar {
    background-image: url("http://seolookup.com/wp-content/uploads/headergold2.gif");
    background-repeat: no-repeat;
    background-position: center;
}

And update it to :

@media (min-width:979px){
.x-navbar {
    background-image: url("http://seolookup.com/wp-content/uploads/headergold2.gif");
    background-repeat: no-repeat;
    background-position: center;
}
}

Hope it helps.

[erikzettParticipant]

Thanks this helps a lot – on this same mobile nav, you’ll also notice I have a button (its a nav button with a unique css class background specified at the menu, this appears on far left).

Is there an easy way to make this align center with the other links when the window is reduced?

see http://seolookup.com/test

[ThaiModerator]

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.

[erikzettParticipant]

No problem – to explain, I have created a custom nav class called .logobutton and applied a unique background image to it.

see http://cl.ly/image/123n0V0a361J

If you can visit http://seolookup.com/test

… when the hamburger icon is selected, the image button appears as expected, but is justified left.

– I am trying to either hide or justify the button center like the others

see http://cl.ly/image/2R3o1G3E2908

thanks –

===

[Rue NelModerator]

Hello There,

Thank you for the very detailed information. To center the logobutton, change the margin left and right to auto. Perhaps this code will help you.

.x-nav-wrap.mobile .logobutton {
    margin: 0 auto;
}

Please let us know if this works out for you.

[erikzettParticipant]

thanks that fixed the issue with that. thanks for your excellent support

[Rue NelModerator]

You’re welcome!
Thanks for letting us know that it has worked for you.

[Author]

Posts