Hello,
My first thought it was how to create a tooltip for the main menu options. How to mouse over the main menu and appears extra info about the every menu item.
Because in my website I do not have to use submenu items I thought that it would be much easier idea to play in that way.
Look at my page: http://glasstimes.org/ and check the Home – About us – Products – Customers – Blog.
You see when you mouse over it appears in every menu item a submenu Item as a description.
-Home -> Briefly about Glass Studio
-About us -> DNA, Philosophy, Company and Team
-Products -> We craft, you explore the plethora.
-Customers -> Our exceptional portfolio of projects and testimonials
-Blog -> News, Articles, recipes and …
but, here comes the problem.
as you will also see in my attached image (images-1.jpg), the white background ( background-color: #FFFFFF;) it is cut in a half of my text when I mouse over in the Home menu item..
but when i mouse over in “Briefly about Glass Studio” sub menu item then I see the white background color as I wanted to be.
look the attached image-2.jpg
I also want to help you more, to understand me better. I will give you the css custom codes I have used to center the text, and play with the width a little bit, e.t.c.:
nav#main-navigation .menu ul li > a {
padding: 10px 1px;
text-align: center;
width: 165%;
font-size:14px;
}
nav .menu ul.sub-menu li.menu-item > a, nav .menu ul.sub-menu li > span, #top-bar nav .menu ul li > a {
color: #444444;
}
.layout-fullwidth .fw-header #header-section.header-1 nav.mega-menu li .sub-container, .layout-fullwidth .fw-header #header-section.header-2 nav.mega-menu li .sub-container {
left: -100px !important;
padding: 10 5px;
text-align: center;
font-size:14px;
width: 165%;
}
nav .menu ul.sub-menu {
width: 100%;
}
so, please can you help me to solve my problem?
Thank you!
.