Nav bar below header border hidden

[marieaimee]

Hello,
I am a total newbie and trying to build ecommerce site (right now all content is dummy content). www.iheartprettylights.com

My problem is- the border of the navigation bar below the header was hidden, but on my front page only. Also it appearred when I hovered over the nav bar items. I included the following snippet in my custom styles:
.col-control {
margin: 0 auto;
padding: 5px;
This has fixed the front page, but also added padding to the other pages, which were fine and now have too much space. Please help!
Thank you.

[drake]

Take out the code from Custom Styles (also is incorrect if you put there only what you paste here - you forget the closing bracket "}" - other codes which will follow this never will be executed)
Instead, set your border at Skinning -> Navigation Bar Below Header but not only for nav bar, but also for menu items and for all states of menu items (after you visit a page that menu item became "visited", so, for visited state you need to set the border as you wish... when you are on the page the menu item are "highlighted" and so on)

[marieaimee]

Hi thank you for that, but unfortunately it has not worked. I took out the bit of code - I did have the final bracket, so it was working.
Now you can see what it looks like. You will see it is only like this on the front page - the border looks like its hidden under the menut items. All other pages are fine. What do you think?

Thank you!

[drake]

Ok, first of all the problem isn't generated by menu, but by your template schema. For first page you choose 1L sidebar with 1200px width for the rest of pages you have 1L1R sidebars with 1000px width. So, for first page your menu fit naturally in the page width, for the rest of pages menu items + right header widgets are constraint to fit in a smaller width, so the search form goes to bottom and the height of nav bar is increased. As you can see, the right behavior is on the home page, only by mistake you obtain a height as you wish on the rest of pages.

For equalizing the height of nav bar across pages add at Suffusion Options -> Backend -> Custom Includes -> Custom Styles just:

Code: Select all

#nav {height:51px;}

(I use the height from pages, but you can adjust that 51px as you wish - and your new height will be showed on all pages, even in the case that you adjust the width of all pages to be the same at Suffusion Options -> Layouts -> specific Layout)

[marieaimee]

Awesome, that worked! Thank you!