navigation bar transparent

Hello Mike,

thanks a lot for the css-script. It works perfectly! https://www.osmosis.de/NEU/

1. For my second question: sorry that I expressed myself unclear. I meant the white line between the logo and the navigation and the second white line below the navigation. I would like to have removed these lines. Can you help me?

2. For the further development of navigation, I have one more question:
if you click on one of the bottom 3 menu items (PROJEKTE, WETTBEWERBE, KATEGORIE) onClick should open a submenu in the vertical menu bar, as shown in the template https://osmosis.de/support/website_vorlage2.pdf.
Even if I have already created the submenu, it is not shown to me and I find no way to integrate it into the navigation. Could you show me a way here too?

Best regards
Diana

Dear Support Team,

Thanks for the support, so I could now progress and already create a submenu: it now appears exemplary for the menu item “KATEGORIE” (last menu item)

However, there are still 2 problems that are unsolvable for me:

1. I would like that the submenu does not appear to the right of the main menu item but below. (see template pdf https://osmosis.de/support/website_vorlage2.pdf). How do I have to change the script to put the submenu down?

2. As soon as you touch one of the submenu items with the mouse, the font of the main menu item changes, it turns white without the background turns black and is no longer legible. Actually, I wanted it so that the selected menu item always has a black background and the font is white.

Many thanks for your help!
Greetings DIana

Dear Mike,

Thanks for the script. It works very well and I was able to expand and refine the subnavigation.
If you go to the main menu on the menu item “Kategorie”, then the submenu – correctly placed and formatted.

However, there are still 2 errors in the active state of the submenu:
If you now click on the first submenu item “Stadträume” as an example, you will get to the top of the page of city rooms and the errors will appear in the submenu:
1. Going back to the menu item “Kategorie”, the rollover effect (inactive state: white background, black text /// hover state: black background, white text) is not executed correctly and the word “Kategorie” is not readable. The same applies to the first submenu item “Stadträume”. Here also just a white field appears.
Can you help me here, so that the font is displayed again in both cases?

2. There is one more discrepancy with the submenu: If you switch very slowly with the mouse from one submenu punk to the other, the font of the button will appear white in the first moment (inner white field) before the roll-over effect ( hover condition: black background, white font) eintritt: See screenshot: https://www.osmosis.de/support/screen1.png This unwanted effect, but I only have the submenu. This does not appear in the main menu. What can I do to avoid this effect?

Many thanks.
Best regards

Dear Mike,

Thanks for the tip. I have implemented your proposal once and removed from the css all font-formatting scripts and instead formatted via the “Advanced setting” the navigation elements.
Unfortunately, the result is now again a new Drucheinander: https://www.osmosis.de/NEU/
I have not yet reset it and left it in this condition, first of all I wanted to ask you first whether you think that this is the way to go? Or if I should return to the old css again.
Here again a screenshot of the previous state (without css) – Change: https://www.osmosis.de/support/screen1.png

I do not work on the theme today, so you’re welcome to tweak the css.

Below I will send you a copy of my css – before I have deleted formatting concerning the navigation colors.

.header_color .header_bg {
background-color: transparent!important;
}
/* Header transparent */
.header_bg { background-color: rgba(255,255,255,0.5)!important; }
#main { margin-left: 0px !important; }

/* Abstand Logo Rand*/
.html_header_sidebar .logo {
padding-left: 41px;
width: 220px;
}

.header_color nav,.header_color div,.header_color nav ul,.header_color span {
border-color: transparent !important;
}

/* NAV Button kontakt Abstand*/
.html_header_sidebar #header .av-main-nav > li#menu-item-3889 > a {
margin-bottom: 60px;
}
/* NAV Buttons Abstand*/
.html_header_sidebar #header .av-main-nav > li > a {
line-height: 1.7em;
height: auto;
padding: 0px 3px;
border-bottom-style: solid;
border-bottom-width: 0px;
margin: 0 auto;
}

/* NAV Aktuell */
#top #header .av-main-nav > li#menu-item-3426.current_page_item > a .avia-menu-text {
color: #ffffff;
background-color: #000000;
width: 107px;
}
#menu-item-3426 .avia-menu-text:hover, #menu-item-3426 .avia-menu-text:active {
color: #ffffff;
background-color: #000000;
width: 107px;
}
#menu-item-3426 .avia-menu-text {
color: #000000;
background-color: #ffffff;
width: 107px;
}

/* NAV ÜberUns */
#top #header .av-main-nav > li#menu-item-3425.current_page_item > a .avia-menu-text {
color: #ffffff;
background-color: #000000;
width: 125px;
}
#menu-item-3425 .avia-menu-text:hover, #menu-item-3425 .avia-menu-text:active {
color: #ffffff;
background-color: #000000;
width: 125px;
}
#menu-item-3425 .avia-menu-text {
color: #000000;
background-color: #ffffff;
width: 125px;
}

/* NAV Kontakt */
#top #header .av-main-nav > li#menu-item-3889.current_page_item > a .avia-menu-text {
color: #ffffff;
background-color: #000000;
width: 121px;
}
#menu-item-3889 .avia-menu-text:hover, #menu-item-3889 .avia-menu-text:active {
color: #ffffff;
background-color: #000000;
width: 121px;
}
#menu-item-3889 .avia-menu-text {
color: #000000;
background-color: #ffffff;
width: 121px;
}

/* NAV Projekte */
#top #header .av-main-nav > li#menu-item-3424.current_page_item > a .avia-menu-text {
color: #ffffff;
background-color: #000000;
width: 117px;
}
#menu-item-3424 .avia-menu-text:hover, #menu-item-3424 .avia-menu-text:active {
color: #ffffff;
background-color: #000000;
width: 117px;
}
#menu-item-3424 .avia-menu-text {
color: #000000;
background-color: #ffffff;
width: 117px;
}

/* NAV Wettbewerbe */
#top #header .av-main-nav > li#menu-item-3423.current_page_item > a .avia-menu-text {
color: #ffffff;
background-color: #000000;
width: 170px;
}
#menu-item-3423 .avia-menu-text:hover, #menu-item-3423 .avia-menu-text:active {
color: #ffffff;
background-color: #000000;
width: 170px;
}
#menu-item-3423 .avia-menu-text {
color: #000000;
background-color: #ffffff;
width: 170px;
}

/* NAV Kategorie */
#menu-item-3422 .avia-menu-text {
color: #000000;
background-color: #ffffff;
width: 128px;
}

#menu-item-3422 .avia-menu-text:hover, #menu-item-3422 .avia-menu-text:active {
background-color: #000000;
color: #ffffff;
width: 128px;
}

/* Submenü ohne Feld*/
.html_header_sidebar #top .av-main-nav ul a {
padding: 0px 0px;
}

/* Submenü weisses Hintergrundfeld */
.header_color .main_menu ul ul, .header_color .main_menu .menu ul li a, .header_color .pointer_arrow_wrap .pointer_arrow, .header_color .avia_mega_div, .header_color .av-subnav-menu > li ul, .header_color .av-subnav-menu a {
background-color: transparent!important;
border: none;
}

.html_header_sidebar #header .av-main-nav > li:hover > a .avia-menu-text {
background-color: #000 !important;
}
.av-main-nav li#menu-item-3422 ul.sub-menu {
left: 4px !important;
position: relative !important;
}

/* Textgröße Submenü (und alle Menüs)*/
.avia-menu-text {
font-size: 16px;
font-weight: normal;
letter-spacing: 1px;
}

/* SUBNAV Buttons Kategorie Abstand*/
.html_header_sidebar #header .av-main-nav > li#menu-item-3422 > a {
padding-bottom: 60px;
}

/* SUBNAV Stadträume */
#menu-item-3584 {
color: #000000;
background-color: #ffffff;
width: 151px;
}
#menu-item-3584:hover {
color: #ffffff;
background-color: #000000;
}

/* SUBNAV Parks */

/* SUBNAV Bildung */
#menu-item-3845 {
color: #000000;
background-color: #ffffff;
width: 121px;
}
#menu-item-3845:hover {
color: #ffffff;
background-color: #000000;
}

/* SUBNAV Unternehmen */
#menu-item-3851 {
color: #000000;
background-color: #ffffff;
width: 167px;
}
#menu-item-3851:hover {
color: #ffffff;
background-color: #000000;
}

/* SUBNAV Gutachten */
#menu-item-3858 {
color: #000000;
background-color: #ffffff;
width: 140px;
}
#menu-item-3858:hover {
color: #ffffff;
background-color: #000000;
}

/* Beitrag Gallery */
#av_section_1 .container {
margin: 0;
padding: 0;
width: 100%;
max-width: 100%;
}

.home #av_section_5 .container .flex_column.av_one_full {
padding-left: 0 !important;
padding-right: 0 !important;
border: 0 !important;
}

#top #main .avia-section .template-page {
width: 100%;
border: none;
margin-left: auto;
padding-left: 0;
padding-top: 0;
margin-right: auto;
margin-top: 0;
padding-bottom: 0;
}

/* Footer Socket NAV */
.socket_color span {
color: #000000;
background-color: #ffffff;
font-size: 11px;
font-family: ‘Lato’
}
#socket .container {
padding-top: 20px;
padding-bottom: 20px;
}

/* Masonry Gallery Titel Overlay */
#top .av-caption-style-overlay .av-masonry-item-with-image .av-inner-masonry-content-pos {
display: table-cell;
vertical-align: bottom;
text-align: right;
}
#top .avia-post-nav {
visibility: hidden;
}
.avia_desktop .av-masonry-entry:hover .av-masonry-image-container {
-webkit-transform: none;
transform: none;
}

span.av-masonry-date { display: none; }

/* Masonry Gallery Image zoomIn*/
.flex_column av_two_fifth flex_column_div first avia-builder-el-2 el_after_av_hr el_before_av_one_fifth {
margin-left: 40px;
}

#top #wrap_all .all_colors h3 {
text-align: right;
}

/* Tabelle */
.avia-data-table.avia_pricing_minimal td {
text-align: left;
padding-left: 0px;
padding-top: 5px;
padding-bottom: 5px;
font-weight: 300;
}

/* Tabelle Spaltenbreite */
.avia-table-1 td:first-child {width: 27%}
.avia-table-1 td:nth-child(2) {width: 73%}

/* Tabelle Smartphone */
#top .main_color .avia-data-table.avia_pricing_minimal td {
color: #282b2e;
text-align: left;
}

.main_color td
{
border-color: #ffffff;
}
td {
font-size: 14px;
padding-top: 9px;
padding-right: 12px;
padding-bottom: 9px;
padding-left: 0px;
}

/* Subtitel Überschrift */
.av-subheading p:last-child {
margin-top: 20px;
}
#top #header .av-main-nav > li:hover > a .avia-menu-text {
color: #fff !important;
}

Dear Mike,
Thank you very much for the support, which looks very good, except for one small thing.
What is different from my ideas is:
1. the length of the bars of navigation elements. They should not all have the same length, but adapt to the length of the font according to the font length.
2. In addition, the submenu items should appear at a distance to the main menu item “KATEGORIE”.
See screenshot of the old version: https://osmosis.de/support/screen3.png
How can I integrate these two elements into the current version?
Thank you for your departure and best regards Diana

Good morning Mike,

Thank you for the further support.
The script with the definition of the button length works very well! Many Thanks

To the previous second point:
Unfortunately, adding the script “top: 50px! Important;” to the # menu-item-3422 – as suggested – unfortunately no effect. So now I have the supplement “margin-top: 50px;” inserted: .avia-menu.av-main-nav-wrap ul li ul li # menu-item-3584 {max-width: 130px! important; height: 22px! important; margin-top: 50px! important;}
That works now.

Basically, there is still a big problem with the submenu:
Even though I have already adjusted the height of the submenu items to 24px in the css, they still appear in a different, much larger height and, above all, overlap themselves: see screenshot: https://osmosis.de/support/screen4.pdf

Where does this overlap and the height of the submenu items come from?
Thanks and best regards
Diana

whoow cool, now the subnavigation is perfect! Thanks alot!