Customizing Navigation Menu / Background / Expanding Drop Down « Support Forum | Kriesi.at - Wordpress Themes and HTML Templates

Kriesi.at - Wordpress Themes and HTML Templates

Support Forum » Flashlight

not resolved

Customizing Navigation Menu / Background / Expanding Drop Down

16 posts from 4 voices

Started 1 year ago by larssonk22
Latest reply from larssonk22
This topic is not resolved

Tags:

larssonk22
Member

Hello, I am currently customizing the look of the template

I wanted to do a couple of things,

1. I have moved the child links to appear underneath the parent link. I want to make a hover over effect similar to superfish ie when you hover over the parent link to view the child links, the other links below will be pushed down the page to make room for the child links to appear.

If you look at My Site I have large space where the child links appear (hover over BEACH or CITY), I cannot figure out how to remove the large spaces.

2. I wanted to add a transparency and blur to the background of the navigation menu. Does anyone know how to do this?

3. I want to use Josefin custom font, but it isn't appearing very clear, does anyone know why?

4.Lastly, the custom font is not being applied to the child links in the navigation

Many thanks

Posted 1 year ago #
larssonk22
Member

I've made a few changes since posting. I've added a image for the background transparency, but I still looking for a way to blur any content underneath this.

I've changed font to Oswald, is there any way to have hoverover effects on custom fonts??

thanks

EDIT

Sorry another question.

How can I get the child links in the navigation to stay on screen if user is currently viewing a child page?

thanks

Posted 1 year ago #
Dude
Dude
Hey,
it's not easily possible to add a blur effect to the background because this requires calculations. There're some js scripts out there which use canvas but I can't give you instructions how to implement them (because I've never done it and I'd need to do some research myself): http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html

2) I've reported this question to Kriesi. It seems to be a Cufon issue. Basically Cufon should support hover effects (and Kriesi activated the feature in this theme) but it doesn't work correct. Another users reported the bug too and I'm waiting for Kriesi's answer.

3) You can use following css code:
```
#top .main_menu .menu .current-menu-item sub-menu{
display: block !important;
visibility: visible !important;
}
```
Posted 1 year ago #
larssonk22
Member

Hi, thanks for the reply I wait to hear what Kriesi says, in the mean time I'll just disable it.

I tried the css code, the gap has gone but I child links are overlapping the parent links. I've tried setting the z-index both to 5 but this hasn't had an effect

Posted 1 year ago #
larssonk22
Member

I've just found using firebug if I go to the element style for the sub-menu ul and disable display:block and add position:relative it works.
However I don't know where in the css it is getting the display:block from so I cannot edit it out.

Posted 1 year ago #
larssonk22
Member

Could you tell me which php file contains the code for the navigation menus please

Posted 1 year ago #
Dude
Dude
Hey,
1) The display:block attribute is added by the javascript. In js/avia.js you'll find following line:
```
sublist.css({display:'block', opacity:0, visibility:'hidden'});
```
which triggers this output.

2) The nav menu code can be found in js/avia.js and flashlight\includes\admin\register-menu-walker.php
Posted 1 year ago #
larssonk22
Member

thank you, that worked

IE7 and IE8 are behaving oddly, if you try to scroll over the child links the drop down closes, do you mind having a look.

Seems that the slide show is causing some conflict but navigation works perfectly in IE8 if there is no slideshow. However IE7 does something very strange, it looks like the navigation has disappeared but there is a small vertical scroll bar on the right hand side of the page.

thanks

Posted 1 year ago #
larssonk22
Member

Bump
Please help asap :(

Posted 1 year ago #
areaofinterest
Member

Hi Larssonk22

The default sub-menu in Flashlight sucks, and just like you, I would prefer it was positioned underneath the parent links.
Would you mind sharing how you created your submenu?

Best, Martin

Posted 1 year ago #
larssonk22
Member

Hi Martin, the technical support here is poor as well unfortunately, I'm going to have huge delays launching this site because it takes so long to get a response if at all :(

You can edit the main style.css/minimal-skin.css or add overriding styles in the custom style section. I've tried to use the custom style sheet as much as possible to make upgrades easier.

First of all I removed the position absolute and left positioning from the parent link i.e.

#top .main_menu .menu ul {position:relative !important; left:0px !important;}

Next removed the padding from #top .main_menu .menu li li {padding: 0 0 !important;}

Then I had to remove the border-bottom from #top .main_menu .menu ul li a {border-bottom:0px !important;}
You may want to keep the border but remove the border from the ul, so you could use this instead

#top .main_menu .menu ul {border:0px !important;width:200px !important;}

After that's done you need to add a position to the child link ul container i.e
#top .main_menu .menu ul {position:relative !important}

Then as Dude mentioned, find the 'avia.js' file in the js folder, removed the display:block from the line
sublist.css({display:'block', opacity:0, visibility:'hidden'});

mine looks like this now

sublist.css({opacity:0, visibility:'hidden'});

Think that's it, hope that helps

-
Larss

Posted 1 year ago #
Chris Beard

Hi,

concerning your IE7 issue you should have a look at this.

I'd also like to add we try to answer the support questions within 24 hours, however it is my fault quite some topics have gone unanswered recently because I couldn't fill in my shifts.

Your request is a customisation of the theme, which isn't within the direct scope of the support forum - and it has been passed as a feature request.

For further requests you can paste code between backticks as suggested below the "Send Post" button, this way we can have a clear look at the code you're pasting.

Let us know if there's anything else.

Posted 1 year ago #
larssonk22
Member

Hi Chris, ok thanks. Do you have any idea what is stopping me from being able to scroll over the child links in IE8?

Posted 1 year ago #
areaofinterest
Member

Thank you so much! I will try it out and let you know..

Posted 1 year ago #
larssonk22
Member

I've given up on this so I've decide to completely redo the navigation menu using superfish

Could one of the admins please confirm where the container is for the navigation menu

I went to "flashlight\includes\admin\register-menu-walker.php" but there is no sign of ".main_menu main_menu_menu_manager" or "#menu-navigation"

-edit-

NM, thought I had checked sidebar.php but I guess I hadn't. Found it

Posted 1 year ago #
larssonk22
Member

ok I figured out that the IE7 bug was caused by having no height defined so I added the following to the css style sheet

html,body {height:100%;}

Posted 1 year ago #

RSS feed for this topic

Reply

You must log in to post.

© Copyright Kriesi.at – Wordpress Themes and HTML Templates

top