Menu Edin

lovestorydesigns · Member · Oct 20, 2016 at 7:28 am
Copy link

Add topic to favorites
Hi I am using the Edin theme and have a few questions about the Menu – using the default menu – little circle button which opens out into the full menu.
1) Can I use an image being the text
2) I have changed font colour and type but is there a way of having two different style? I was thinking of having standard for the main menu then having the product menu in italic
3) in relation to the above, could I have different font types for each menu?
4) Is there a way of reducing the overall size of the menu when in use?
5) Is there a way I can change the font colour/background when the cursor hovers over it

Sorry for all the questions? Love this theme but the menu really does not work well :(

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Oct 21, 2016 at 7:43 pm
Copy link
Hi, the following CSS would make the Product menu item label italic. What I’ve done is use the web inspector in my browser to get the unique menu item id for that menu item so that I can change only that menu item to italic. I’ve also included a color declaration just as an example.
```
.primary-navigation .menu-primary #menu-item-754 a {
    font-style: italic !important;
    color: #cc0000;
}
```
Using images is certainly possible although it typically requires a bit more code to get things looking right. If you upload an image to your media library for one of your menu items that I can use, I’ll work out the code for that one and then you can use that as an example for doing the others.

Different font families for each menu item is difficult. You can only set two custom fonts in the Customizer. Past that, we would have to assign fonts that are installed on all computer systems, otherwise visitors would not see the other font.

For hover effects on the menu items, yes we can do that, but one thing to remember is that on phones and tablets, you can’t really “hover” so the effect would only be for users on computers. The following sets a background color and a different font color on the Products menu item.
```
.primary-navigation .menu-primary #menu-item-754 a:hover {
    background-color: #ff00ff;
    color: #0000ff;
}
```
lovestorydesigns · Member · Oct 21, 2016 at 8:35 pm
Copy link
Hi thank you. I have tried both and they did not really work. I have managed to get the grey hover button but it only appears on ‘Products’ in the menu, also ‘Products’ is now showing as red in my menu when all others are black. Two of the 6 items became italic rather than all of them? I was hoping to change my product menu to italic rather than the main menu if this is possible?

I have added Adelle as the font but nothing has changed.

Any help would be greatly received
thesacredpath · Member · Oct 24, 2016 at 5:17 pm
Copy link
Hi, you would need to edit the color codes. I’ve just use some random colors. I also targeted just the Products menu item. The following changes it to italic.
```
.primary-navigation .menu-primary #menu-item-754 a {
    font-style: italic !important;
}
```

No items found.