Return to previous page

Menu item height when having submenus - by BrokenDancer

This topic has 7 replies, 2 voices, and was last updated 9 years, 7 months ago ago by Brian Johnson

BrokenDancer

Participant

April 16, 2015 at 14:11

Hi,

I’ve been searching for the right line in the stylesheet but I can’t seem to fix it myself.
As you can see in the screenshot, the menu item “Tuinmeubelen” is positioned slightly higher then the other times because it has a submenu.
How can I fix that?

https://dl.dropboxusercontent.com/u/3502821/menu.jpg

Jan

#57465 Copied

6 Answers

BrokenDancer

Participant

April 16, 2015 at 14:16

Extra question:
I changed the size of the menu items but no I see that it creates a problem with the menu that appears on top when I scroll down on the page, see screenshot:
https://dl.dropboxusercontent.com/u/3502821/menu%202.jpg

#57469 Copied

Brian Johnson

Member

April 16, 2015 at 15:11

The latest theme version(1.4) has smooth line of the menu items. Please check if any customization causes this issue.

With best regards
Brian Johnson

#57491 Copied

BrokenDancer

Participant

April 16, 2015 at 15:27

Hi,

this is the list of custom css I’m using now, I tried to delete some stuff but it doesn’t help:

.menu > li a {
font-family: ‘Helvetica’, OpenSans;
font-weight: normal;
font-size: 16px;
color: #505050;
display: inline;
font-weight: 600;
padding: 8px 20px;
float: left;
width: 100%;
}
.header-logo img{
max-width: 500px;
}
.boxed .st-container {
box-shadow: 0px 0px 0px !important;
}
.header .links{display:none}
.product_meta {
display: none;
}
.page-heading .title {
color: black !important;
}
.woocommerce-breadcrumb {
color: black !important;
}

.woocommerce-breadcrumb a:hover{color:black!important}
.woocommerce-breadcrumb a{color:black!important}
.woocommerce-breadcrumb {color:black!important}

.menu .nav-sublist-dropdown ul > li > a {
font-family: ‘Helvetica’, OpenSans;
font-weight: normal;
font-size: 14px;

}

.menu > li > a{text-transform:lowercase;border:none;}
.menu > li > a:first-letter{text-transform:uppercase}
.menu .nav-sublist-dropdown ul > li > a {text-transform:lowercase;}
.menu .nav-sublist-dropdown ul > li > a:first-letter{text-transform:uppercase}

.menu > li > a {
border: none !important;
}

.breadcrumbs {
color: black !important;
}
.bc-type-3 a, .bc-type-4 a, .bc-type-5 a, .bc-type-6 a, .bc-type-3 .delimeter, .bc-type-4 .delimeter, .bc-type-5 .delimeter, .bc-type-6 .delimeter, .bc-type-3 .back-history::before, .bc-type-4 .back-history::before, .bc-type-5 .back-history::before, .bc-type-6 .back-history::before {
color: black !important;
}

.menu-wrapper {border: none !important;}
}

#57500 Copied
Brian Johnson

Member

April 16, 2015 at 15:41
Sorry we are unable to check what causes the issue without entering your site. Perhaps logo width is more than needed and it breaks header layout.
You may try to add this code which may not be solution for you :
```
.menu {position:absolute;left:29%;width:650px;}
.menu > li a {padding: 8px 10px;!important;}
```
Please let us know when your site will be online to check the issue.

Thank you for understanding.

With best regards
Brian Johnson
#57507 Copied
BrokenDancer

Participant

April 16, 2015 at 15:47

Thank you, that works for the menu showing when scrolling down on the page.
The main menu doesn’t have a smooth line yet. The word is still about 10px higher. Strange thing: in the smaller menu that appears when you scroll down, the second word is in a smooth line.

#57508 Copied

Brian Johnson

Member

April 16, 2015 at 15:58

You may check this element with Opera browser clicking right mouse on the element and investigate it with developer tools. You may also inspect this element in Chrome developer tools or other similar instrument and check css values for it.

With best regards
Brian Johnson

#57510 Copied
Viewing 7 results - 1 through 7 (of 7 total)