Neighborhood 3 issues

[10foldDigital]

Hi,

How can I remove the white horizontal line between the header and navigation + alter the height of the navigation bar and change the colour of the navigation bar (separate to the header colour i.e., I want the header black and the navigation grey). I’ve attached a screenshot.

Thanks

Attachments:

You must be logged in to view attached files.

[10foldDigital]

Hi,

I’ve worked out how to remove the horizontal line between the header and navigation and change the colour of the navigation bar, and to change the height of the navigation bar – but when I do the contents of the nav bar doesn’t change with it.

A quick question, how much custom css can mess with the system seeing as though its over writing whats currently there? I’ve guessed most of the css. Also is there a list of all css elements?

Thanks

[Rui Guerreiro – SUPPORT]

Hi,

Can you explain exactly what you are trying to do with the contents of the nav bar?
No, there isn’t any css list since the html elements can be targeted in many different ways.

-Rui

[10foldDigital]

Hi Rui,

I want to shrink the height of the navigation bar (including the divider line between the shopping bag and the wishlist) and vertically centre all the the text links contained in the navigation bar). + replace the shopping bag icon.

Thanks

[David Martin – Support]

To shrink the header padding use:

#header-section.header-1 #header {
    padding: 5px 0;
}

It looks like you have already set the height of the menu using this custom CSS you added:

#header-section > #main-nav{
height: 45px !important;
}

To change the basket icon, you can use this example where I use a fontAwesome basket icon:

a.cart-contents:before {
    content: "\f291";
    font-family: fontAwesome;
    margin-right: 10px;
    color: red;
}

[10foldDigital]

Hi David,

Thanks for your help. I have reduced the height of the navigation bar, but as you can see from the screenshot the contents in the nav bar (nav links, shopping bag icon and divider line) haven’t centered vertically * divider line hasn’t shrink to the same height as the bar.

Also, now I’ve added the font awesome icon, where can i remove the original icon?

Thanks

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

1)

.menu > li.shopping-bag-item a > i.sf-cart, 
.mobile-cart-link i.sf-cart {
    display: none !important;
}

2) As you have explicitly set the height of the menu in your custom CSS, you need to adjust the line height for those header menu items.

#header-section > #main-nav {
	line-height: 36px;
}
#main-navigation ul.menu > li {
    line-height: 36px;
}
#main-nav .header-right ul.menu > li {
    line-height: 36px;
}

[10foldDigital]

Awesome, worked perfectly.

Thanks for the help!

Cheers

[Rui Guerreiro – SUPPORT]

No problem. Thanks David.

-Rui