Top bar issue

dualxeon64

n00b
Joined
Feb 2, 2011
Messages
22
I am having a small issue on my site it does not show really show unless you are on a mobile device or when you go half sized on a screen. What is going on is that the top bar on the screen is blue and it goes all the way across the screen but when you are on a mobile device it cuts off after the coupons tab but when it is in regular screen size it does not do this. I did not notice it until today and I have been working on the site for almost a year now. I have been trying to figure it out using firebug but with no luck. any suggestions.

The site name is superheromail.com
 
Never mind I figured out the issue I will work on it this weekend and get the navigation bar fixed.
 
Did I not post this in the right section or did I not explain well enough?
You posted in the correct forum, but the explanation was very vague. Also, it's unreasonable to expect a quick response when your posts are late at night for many of the forum members.

Never mind I figured out the issue I will work on it this weekend and get the navigation bar fixed.
Glad you have a direction to go. When you finally close the issue, please explain the problem and the solution you used so that others may benefit.
 
When I finish fixing the issue this weekend I will post in detail what the issue was. When I posted the issue i was not sure really how to explain the issue next time I have a issue like this I will post a screen shot or something. But I will give a step by step resolve for it for others.
 
Ok the issue had to do with the centering of the logo for the web site. The logo centered but the logo_container was set to wide so it would not let the page change sizes. The logo container was over hanging to the right side of the template and when you went to a smaller screen size it would give you a scroll bar so you could scroll to the right of the page but nothing was there and it would make the navigation bar appear as if it was cut off.

The code looked like this for the width.


/* ----[ HEADER ]----*/
#header_items {
}
/* Logo */
.logo_container {
width:960px;
top:0px;
left:0px;
}
.logo_container, h1.logo, h1.logo a {
height:200px;


So I made the change to look like this on the width.


/* ----[ HEADER ]----*/
#header_items {
}
/* Logo */
.logo_container {
width:500px;
top:0px;
left:0px;
}
.logo_container, h1.logo, h1.logo a {
height:200px;

very simple change the width was set to 960px and I changed it to 500px so the container would be inside the template params and the issue is resolved. Just waiting for the dedicated servers to update global for the the change to appear on the site.
 
Thanks for sharing the issue and the resolution.
 
Back
Top