Nav bar alignment in header

This topic has 11 replies, 2 voices, and was last updated 10 years, 5 months ago by jimpepe.

Viewing 12 posts - 1 through 12 (of 12 total)

Author

Posts
November 13, 2013 at 7:55 pm #8866
jimpepe
Customer
Hello,

I am having trouble with the nav bar not aligning right after I insert a text widget above it on Header right widget area. Can you please help?

http://www.test.denver-ppc.com

Thank you!
Jim
November 13, 2013 at 8:40 pm #8874
Wes
Moderator
Did you get this fixed? I don’t see anything wrong at the moment.

If it does happen again, check out my comment here – https://appfinite.com/topic/epik-header-image-navigation-area/#post-8430
November 13, 2013 at 8:53 pm #8876
jimpepe
Customer
No it is not fixed the edge of the phone and last nav bar text should be flush right, they are not lined up. If I remove the text widget with the call to action and phone the nav text goes further to the right as I would like it to be with the header text widget there.
November 13, 2013 at 9:28 pm #8880
Wes
Moderator
Your nav is already floating to the right, just like the other widget.

The nav actually shows up the exact same whether there is a widget above it or not….you’re probably only noticing it’s position when there is a widget right above it, because the widget above it doesn’t have padding on the sides. The nav has padding on the right side of each of the nav links. Look around line 2025 –
```
.genesis-nav-menu a {
    border: none;
    color: #fff;
    display: block;
    font-weight: 400;
    padding: 13px;
    position: relative;
}
```
So if you remove the padding for the right side, the nav will “appear” to sit all the way on the right….even though it already is.

Try changing the padding like this –

padding: 13px 0 13px 26px;

The end result should look like this – http://i.imgur.com/tXYU49F.png
November 14, 2013 at 1:58 am #8886
jimpepe
Customer
Wes, thank you for your help but this didn’t work. And actually the nav does not show in the same position without the text widget, which I found odd which is why I mentioned it. With out the text widget on top the nav is further to the right, if it stayed in that same spot it would align with the text above it. I have added the padding you suggested, it doesn’t appear to have changed it at all.
November 14, 2013 at 4:54 pm #8895
Wes
Moderator
I can see the difference, it now looks just like the way I did it in the image. Did you get it working? Or does your site not look like the image I have above? If it doesn’t, try hitting your reload button so it will clear your browser cache and display the latest changes you made to the css.

From my end everything looks fine, and the code I added above that you added seems to have fixed it. Your text and nav reach all the way to the very end (1140px wide). If I’m confused and you’re talking about something different than what I’m looking at just let me know.

Here is what I’m seeing – http://i.imgur.com/MvvAYJv.png
November 14, 2013 at 4:59 pm #8896
Wes
Moderator
Also, what size browser are you viewing the site from? I usually have my browser expanded all the way out on my laptop….but if I resize it a little bit the responsive css kicks in and then it adds a width of 620px to the widget area. So try changing that width to auto and it will look the exact same as the image above. This can be found on line 3885 –
```
.content,
	.site-header .widget-area {
	width: 620px;
}
```
Just change it to auto and let me know the result.
November 15, 2013 at 10:39 am #8915
jimpepe
Customer
Hi Wes,

This is not a width or cache issue, the reason we’re seeing different layouts is a cross browser coding issue.
This is how it renders on Mac Safari, FireFox & Chrome (latest versions) on Mavericks
http:/test.denver-ppc.com/wp-content/themes/epik/example.png

I changed the line 3885 to auto, still no difference on Mac, I see the layout you see on PC, IE and Firefox. Can you help me with a fix for the Mac layout?

Thanks,
Jim
November 15, 2013 at 10:34 pm #8924
Wes
Moderator
It’s definitely not a Cross Browser issue as I am using Mac, and looking at your site in Chrome, Firefox, Safari, and Opera and they all look the exact same. I could post a screenshot for each one, but it will look exactly like the images I have above. I’m running the latest version of Maverick on all of my macs – Macbook Pro, Macbook Air, iMac, iPad.

Also, I am able to see every change that you’re adding to the css. I’m not sure why it’s not showing up for you. The only thing I can think of is your browser cache. Do you have any caching plugins active?

If there is anyone else out there reading this, can you post a quick screenshot of what you see when visiting his site?
November 15, 2013 at 11:14 pm #8930
jimpepe
Customer
Wow! I am at a loss, that is the most odd thing I have seen. There is no cache plugin, in fact there are barely any plugins. I had never previously loaded the site in Chrome, but I had the issue anyway and I just reset FireFox cache, history etc, and I still have the same issue shown on my screen shot. I am not sure what else to try, I can see it as you do on my Parallels install on Windows 7 but not on Mac OS. I am going to switch to internet via tethering my phone and see what happens. Hmm. same result there too. Is it possibly a font issue, perhaps a font you have installed on your computer that I do not? Still wouldn’t explain why it works on Windows but not my Mac side. Any ideas? Sorry for the trouble.
November 16, 2013 at 7:51 pm #8938
Wes
Moderator
I’m not sure if it would be a font issue since it appears the issue is padding. Do you have another computer you could check it on? Are you logged in or out when you check? Try both.

Everything is still showing up perfectly on my end.
November 26, 2013 at 12:28 pm #9156
jimpepe
Customer
Wes, thank again for you help, this appears to be a caching issue with my Mac OS, affecting all browsers, even after resets, I have not solved it but since it’s working and just affects my screen I am not worried about it. Can you help me figure out why home-feature-14 shows Genesis featured page in 1/4 column rather than full 1140 width? It is my understanding from the widget layout guide that area is full width, also looks that way from the CSS. http://www.test.denver-ppc.com

Thanks,
Jim
Author

Posts

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.