LogoBlock problem in Responsive View

[r3v0lution]

Hey @Russ,
I have been messing around the last couple of days trying to get everything lined out without having to bother y'all, but I'm stumped on a few things right now.

Going off the code and advise you gave me on fixing my nav bar in the ticket response, I managed to get the advanced footer the same way (completely filling the content area in "boxed style"). And I used your responses from a thread a couple of days ago to do the same for the header area, using the LogoBlock.
Here is the header area in a full width browser:

But this is what happens when it switches to a responsive view:

The LogoBlock bg shifts to the right 10px or so a few pixels...

I could use some help fixing the font awesome icons on the nav bar as well. The "Alert" icon says its fa-bolt when inspecting element in Chrome, but its showing fa-map-marker.

Thanks in advance!

 

[Russ]

Never bothering us

#XenForo.Responsive #logoBlock .pageWidth {
padding: 0;
}

Would probably do it. XenForo does some weird stuff with the pageWidth padding in responsive. Stick that code in extra.css

 

[r3v0lution]

Yep, that got it... What about the alert icon?

I could use some help fixing the font awesome icons on the nav bar as well. The "Alert" icon says its fa-bolt when inspecting element in Chrome, but its showing fa-map-marker.

I would also like to replace "Bookmark" with a bookmark icon, but couldn't figure out anything besides changing the phrase. And don't really want to do that..

Also, I just realized I posted it on XF.com and not here, I added code to the navigation_visitor_tab to put the FA icons in, but had to add icons for Post Rating in its own template. The result worked, but the icons and text seem closer together than all the others...

Any ideas?

 

[Russ]

you can use css to target each individual icon:

#AccountMenu .fa-cog {
margin-left: 5px;
}

To replace an icon you could just edit the template itself? The bookmark probably has a navigation template which includes into the user menu.

Try doing a search for: fa-bookmark

May help you find where it's located.

Here's a nice cheat sheet:
http://fortawesome.github.io/Font-Awesome/cheatsheet/

 

[r3v0lution]

Haven't gotten a chance to try the above, but just happened to jump on my iPad and noticed that the logoblock Isn't responding correctly..

 

[Russ]

on #logoBlock .pageContent you have width: ####px instead of max-width

 

[r3v0lution]

That I did, however it didn't fix it. I was able to add margin-right: -21px; in the LogoBlock PageContent settings and it fixed it.