Menu/submenu, font face and YouTube issue « Support Forum | Kriesi.at - Wordpress Themes and HTML Templates

Kriesi.at - Wordpress Themes and HTML Templates

Support Forum » Abundance

closed

not a support question

Menu/submenu, font face and YouTube issue

10 posts from 2 voices

Started 6 months ago by cindsoo
Latest reply from cindsoo
This topic is closed
This topic is not a support question

Tags:

cindsoo
Member

I have a few issues with the Abundance theme and I was wondering if someone here can kindly give me a hand. You can preview my site here: http://wordpresscreatives.com/sites/ncc-shop/

Issue 1: Navigation

a) On hover of main menu, I do not know how to remove the left hand border which shows up next to the main menu item.

b) Submenu: On mouseover, the text turns red and the background changes to a different color, I do not know how to add a different background color. I tried and it only applied to the submenu item but not to the whole horizontal area the item is in.

Also how do I resize the width of the submenu?

c) How to open the menu using “target=new”? There are a few menu items I wish to open up into a different browser window but I am unsure how to do this.

d) When you mouseover the main menu items quickly and try to access its sub menu items, sometimes the sub menu items disappear and you need to mouseover the parent menu again in order to access them. Is there a way to prevent this?

e) Is there a link somewhere which gives the breakdown structure of the nav? I have edited the menu and submenu css in the custom.css and it looks messy.

Issue 2: font-face
I have set a “font-face” “Daxlight” in the custom css and when I reference it, the font isn’t being applied. It seems to get applied in the Safari browser but NOT Mozilla or IE.

I need to apply this font-face to: menu items, headings and footer.

What am I doing wrong? I have set the “Heading Font” OFF in the Abundance Theme Options.

Issue 3: YouTube videos
I like how the YouTube video plays in a JQuery layer but there is one location I wish to turn this functionality off. Is there a way to do this?

In the header, you see 3 social icons “Facebook, YouTube and Twitter”. However since the YouTube is a link to a channel and NOT a video page, the JQuery layer has issue loading it. How do I fix it? I was thinking of just bringing the user to the YouTube channel page instead of displaying it in the JQuery layer unless there is an easier way of fixing this issue.

Issue 4:
In Safari browser, for some strange reason the menu and body of the site is missing 1 pixel to the right. You can see the banner ad is showing.

While IE and Firefox doesn’t have this issue. Any idea to fix this?

I would like to thank you in advance for the help. Great ecommerce theme by the way!

Cheers,

Chi.

Posted 6 months ago #
cindsoo
Member

Ok I was able to resolved issue 2: font face.

Posted 6 months ago #
Devin
Moderator
Hi Chi,

Try adding the following CSS to your Quick CSS (located under the Styling Tab in the theme options) or the custom.css file in the css folder of your theme files:
```

#top .main_menu .avia_mega > li:hover, #top .main_menu .avia_mega > .current-menu-item {
border-left: none;
}


#top .main_menu .avia_mega ul ul li:hover, #top .main_menu .avia_mega > li > ul li:hover {
    background-color: #333;
}


#top .main_menu .avia_mega > li > ul a {
width: 170px;
}
```
c) Go to Appearance>Menus in the Wordpress admin and expand one of your menu items. There should be a checkbox to make the link open in a new window. If not, go to the top right hand of the screen and Show Options. Check the box for Link Target then it should show up on the menu items.

d) I'm not getting the same behavior so I'm not sure how to change it. It would be the first time I've heard of the issue with Abundance however so it could be a browser issue or something local.

e) No there is not. Its just a really big un-ordered list though so pretty standard.

For the font, if you don't have the font loaded in by google fonts, cufon or something like that there isn't any way for the users computer to render it. IE, if needs to be a standard web safe font or else you have to add load it into the users computer for them to render.

Set your links to have the class noLightbox like the following example to remove the lightbox functionality from them:
<a class="noLightbox" href="http://www.youtube.com/">Youtube</a>

The 1 pixel difference is probably something that Safari does slightly differenly than other browsers but I'm not able to test for at the moment. Your best bet is to inspect the code and see if you can find what change will make it fit perfectly and see if changing the css effects other browsers.

Regards,

Devin
Posted 6 months ago #
cindsoo
Member

Wow Devin,

Thanks alot for the quick feedback!!

I will try your suggestions and see if they will work.

In the meantime, in regard to the Safari browser, I was able to fix the 1px by using a Safari hack.

So issue 4 was also fixed.

Posted 6 months ago #
cindsoo
Member

Issue 3 was also solved by using class="noLightbox" as suggested.

Thanks.

Now I only have issue one to deal with. =)

Posted 6 months ago #
cindsoo
Member
Hi Devin,

Everything in the nav seems to be ok except for changing the width of the sub menu.
```

#top .main_menu .avia_mega ul > li > ul a {
width: 150px;
}
```
Posted 6 months ago #
cindsoo
Member

I have another issue, on the sub page such as this http://wordpresscreatives.com/sites/ncc-shop/shop/scarf, the SHOP nav on mouseover move 1px to the left, how can I prevent this from happening?

Thanks.

Posted 6 months ago #
cindsoo
Member

I was able to get everything done except for the above issue. On a sub page, the menu shift 1px to the left when you mouseover the SHOP nav.

This css is shared with the other so each time I made changes to it, it got applied to all. Can someone provide me with the correct css?

Thank you kindly.

Chi.

Posted 6 months ago #
Devin
Moderator

Hi Chi,

It looks like maybe a line height difference between where you've customized the menu and something left over from hovering on the menu items. I went through all the basics of what I would guess it to be but didn't have any success.

You may need to go through your custom.css and comment out each change until it fixes itself you can identify what the cause is.

Regards,

Devin

Posted 6 months ago #
cindsoo
Member

Thanks Devin. I will try.

Posted 6 months ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.

© Copyright Kriesi.at – Wordpress Themes and HTML Templates

top