Smaller "clickable area" in header main menu - Support | Kriesi.at

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

Author

Posts
March 20, 2016 at 7:42 pm #600868
ping-pong
Participant
Hey,
I did some changes to my header and main menu in header and now have a problem with the “clickable areas” for the menu items which are around five times as high as the menu item itself, also the colored hover is much too high. I’d like to have them shrunk to only a bit higher than the menu item. How can I achieve this?
At the moment the hover on menu items is grey, so this grey area should be smaller.
I’m sorry I don’t really know how these “clickable areas” are called.
(I know that the design doesn’t look very well but that’s only cause I’m mostly working offline and the online version is only for support.)
Changes in Quick CSS:
```
/* HEADER */

/* Logo */
.logo img {
height: 100px;
width: auto;
margin-top: 10px;
}

/* header at very top */
#header_meta {
display: none;
}

/* MENU */
.main_menu { margin-top: 40px;
}
.avia-menu-fx{
top: 105px !important;
}
.sub-menu {
top: 85px !important;
width: 160px !important;
}

/* GRADIENT in Header */
#header_main { 
background: #ffffff;
background: -moz-linear-gradient(left,  #ffffff 0%, #ffee00 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#ffee00));
background: -webkit-linear-gradient(left,  #ffffff 0%,#ffee00 100%);
background: -o-linear-gradient(left,  #ffffff 0%,#ffee00 100%);
background: -ms-linear-gradient(left,  #ffffff 0%,#ffee00 100%);
background: linear-gradient(to right,  #ffffff 0%,#ffee00 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffee00',GradientType=0 );
border-bottom: -20px;
}
span.trail-before {
display: none!important;
}

/* GRADIENT in title */
.stretch_full.container_wrap.alternate_color.light_bg_color.title_container {
background: background: #ffffff;
background: -moz-linear-gradient(left,  #ffffff 0%, #ffee00 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#ffee00));
background: -webkit-linear-gradient(left,  #ffffff 0%,#ffee00 100%);
background: -o-linear-gradient(left,  #ffffff 0%,#ffee00 100%);
background: -ms-linear-gradient(left,  #ffffff 0%,#ffee00 100%);
background: linear-gradient(to right,  #ffffff 0%,#ffee00 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffee00',GradientType=0 );
}
span.trail-before {
display: none!important;
}
```
Thank you in advance!
Regards.
March 21, 2016 at 6:14 pm #601430

Günter
Keymaster

Hey ping-pong!

Thank you for using our theme.

The login credentials you posted do not work. Please check them.

Cheers!
Günter

March 21, 2016 at 7:34 pm #601463

ping-pong
Participant

I’m sorry! Now it should work…

March 25, 2016 at 7:10 pm #603694
Andy
Inactive Moderator
Hi!

try this code in Quick CSS field:
```
.avia-menu a {
height: 60px !important;
}
span.avia-menu-fx {
top: 60px !important;
}
```
and adjust as needed.

Best regards,
Andy
March 29, 2016 at 6:31 pm #604733

ping-pong
Participant

Hello and thank you.
It worked partially.
Now there are some other issues/ problems:
1. The colored hover is above the menu item and not on it.
2. It’s kinda hard to click on a submenu item, e.g. on “Tischtennis” (there aren’t yet submenus everywhere) cause the submenu disappears when you move the mouse downwards. It only sometimes works.

Also I created a fullwidth submenu with the “avia layout architekt” which isn’t working as I want it to:
3. The submenu items aren’t clickable – and I absolutely don’t know why not.
4. I’d want to have the submenu right below the main menu in the yellow header area – is that somehow possible? I mean, I know that this fullwidth submenu is part of the content and not of the header but is there still any possibility to get it on the header below the main menu? Or is there another way to create such a submenu which is specific to the selected main menu item?
E.g. if you click on “Tischtennis” there will appear a “Tischtennis submenu” but on “Tennis” will appear another one.

The login credentials are still the same as aforementioned.

Thanks in advance!
Regards.

March 30, 2016 at 11:47 am #605089

Andy
Inactive Moderator

Hi!

you have lots of weird errors, which does not seem to be normal to me. I suggest to delete all theme files via FTP completely before getting a fresh copy from your themeforest account. Delete all custom code you have implemented, to check if one is causing those issues. Deactivate all plugins while testing, to check if you get different results.

Regards,
Andy

March 30, 2016 at 7:18 pm #605391

ping-pong
Participant

Hi!

Thank you. Normally I’m working offline, the online version is just for testing. I don’t know how I got those weird errors cause I only changed things in the Quick CSS section but not in the theme itself. Is it possible to get them with Quick CSS?
I’m a little scared that I really have to continue from zero and won’t get the page like I want it to :(

Regards.

March 30, 2016 at 7:27 pm #605398

Andy
Inactive Moderator

Hey!

Save you Quick CSS’ content somewhere else, then delete it inside theme settings. Check if things are getting better for you. Afterwards you can paste your content again inside of Quick CSS fiel one by one, to see which one is causing this issue.

Best regards,
Andy

March 30, 2016 at 8:04 pm #605417
ping-pong
Participant
I did so. I think the problem is that I’m trying to have the header at the very top with
#header_meta { display: none; }
and then also having the main and sub menu lower in the header
```
.main_menu { margin-top: 30px;
}
.sub-menu {
top: 95px !important;
width: 160px !important;
}
```
And then I try to get a fixed submenu on the particular pages with
```
#top .av-subnav-menu  a {
position: relative;
right: 55px;
top: -35px;
}
```
which causes the submenu links to be not clickable. Also the submenu should be placed in the header (yellow) what I don’t know how to do.
And I want the sidebar menu to appear directly below the header without a space but with
.sidebar_left.sidebar { text-align: left; margin-top: -30px; }
also the main content appears higher than usual.

~~Next problem is that I want the header to shrink with scrolling down but then the text “…denn Sport ist mehr!” should disappear which I can’t figure out how to do.~~Got this one. And at the same time the fixed submenu should be placed in the header as it should be when the header’s not shrunk.

Currently I’m working on the online version, login is still the same if you want to see anything on there.
Well… I’ve got a lot of problems. I’m sorry!
Thanks in advance for your effort!
- This reply was modified 8 years, 7 months ago by ping-pong.
March 30, 2016 at 8:21 pm #605431

Andy
Inactive Moderator

Hey!

I am sorry, but this is simply too much for a basic support like here, as written in our support policy. If you know which code is causing it, then stop using it. If you still want to use it and need theme customization then contact these guys here: kriesi.at/contact/customization

Best regards,
Andy

March 30, 2016 at 8:23 pm #605437

ping-pong
Participant

Hey.
Okay, I already thought so. Anyway thank you very much for being so supportive and patient! You guys do a very great job. Thanks.
Regards.

March 30, 2016 at 8:24 pm #605439

Andy
Inactive Moderator

Hey!

thanks a lot. Let us know in a new ticket if you have some more questions related to the theme. We are happy to assist you.

Best regards,
Andy
Author

Posts

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

The topic ‘Smaller "clickable area" in header main menu’ is closed to new replies.