Making the menu look like this: https://www.afistfullofbolts.com/ - Support

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

Author

Posts
November 27, 2016 at 12:01 am #717304

FreelanceWeb
Participant

Hi,

I’m trying to make my menu looking like this: https://www.afistfullofbolts.com/

This is how far I’ve gotten: http://109.73.237.182/~forrodub/danielegemmiti.ie/

It doesn’t have to be exact, but there are a few obvious issues for a starter.

(A note, the Quick CSS function seems to be broken for me as I can modify the child theme style.css file but the quick CSS changes seem to get over-written)

1) I have added the same custom font but it seems to be slimmer on that site. I tried adding some addition CSS from that site but it doesn’t take
2) I can’t figure out how to make the menu items black on hover
3) The spacing between the items is tricky. Padding left means the dropdown menu is aligned off to the left under the top-level item, but padding right adds a lot of space on the right of the last menu item

Thanks & Regards,
C

November 29, 2016 at 5:49 am #718093
Ismael
Moderator
Hi Ciaran1212!

Thank you for using Enfold.

1.) How did you set the font? This is the style of the nav in the “afistfullofbolts” site. Take note of the font-family property.
```
.primary-nav-wrapper nav {
    font-family: Arial,sans-serif;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .02em;
    font-family: "Courier New","Courier","monospace";
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .2em;
    font-weight: normal;
    font-style: normal;
    line-height: 1em;
}
```
2.) Please go to the Advanced Styling panel, modify the Main Menu Links element and tick the “Apply on hover” option.

3.) Use the “last-child” selector to adjust the padding of the last menu item.
```
#top #header .av-main-nav > li:last-child {
    padding-right: 10px;
}
```
Cheers!
Ismael
November 29, 2016 at 10:00 pm #718537

FreelanceWeb
Participant

Hi Ismael,

1. There are two font-family settings there:
primary-nav-wrapper nav {
font-family: Arial,sans-serif;
font-weight: 700;
font-size: 14px;
letter-spacing: .02em;
font-family: "Courier New","Courier","monospace";
font-size: 12px;
text-transform: uppercase;
letter-spacing: .2em;
font-weight: normal;
font-style: normal;
line-height: 1em;
}

This is what I get in dev tools: http://screencast.com/t/hYj5ynME2T

That header font is definitely not Arial, its Courier New, I’m just not sure why its displaying differently to my Courier New.

2. Thanks

3. Thanks

December 4, 2016 at 6:10 am #720143
Ismael
Moderator
Hi,

1.) I think you didn’t set the font correctly, that’s why I pointed out the font-family property of the site’s navigation. This is your css modification.
```
h1, h2, h3, h4, h5, h6, p, .main_menu, .avia-menu.av-main-nav-wrap {
    font-family: 'courier_newregular', 'Josefin Slab', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6, p, .main_menu, .avia-menu.av-main-nav-wrap {
    font-family: 'couriernew_regular', 'Josefin Slab' !important;
}
```
This is the correct css property.
```
font-family: "Courier New","Courier","monospace";
```
Best regards,
Ismael
December 4, 2016 at 6:28 am #720149

Vinay
Inactive Moderator

Hi,

Font weight and color are different on your size from what you are trying to achieve. Please adjust accordingly.
Try using this extension for chrome browser you might find it helpful :)

Best regards,
Vinay
Author

Posts

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

You must be logged in to reply to this topic.