Support community for TTG plugins and products.
NOTICE
The Turning Gate's Community has moved to a new home, at https://discourse.theturninggate.net.
This forum is now closed, and exists here as a read-only archive.
You are not logged in.
I tried myself on styling the menu. (changing spacing and so on)
Now I have a hard time figuring out how to adjust the drop down menu so that it works again.
Here is the CSS I'm using so far. Probably not very clean or anything but it works for the main navigation...
Any help would be much appreciated! Thanks a lot.
.primary-menu {
border-top: 0px solid black;
border-bottom: 0px solid black;
line-height: 12px;
padding: 6px 0px 0px 0px;
}
.menu-item a:link, a:visited {
color: #000000;
line-height: 12px;
height: 12px;
font-size: 12px;
padding: 0px 9px 0px 9px;
}
.menu-item span {
color: #000000;
line-height: 12px;
height: 12px;
font-size: 12px;
padding: 0px 9px 0px 9px;
}
.menu-item li {
a: #ffffff;
line-height: 24px;
height: 24px;
padding: 0px 6px 0px 6px;
}
Last edited by christopherhauser (2016-10-13 18:41:41)
Offline
Hi Christopher,
Can you post a link to your site please, then we can get a look at what is happening?
Offline
.... haha how stupid of me, I was so taken with the code that i forgot the URL... here you go http://chauser.eu/cp/en/
Offline
one thing really quick:
.menu-item li {
a: #ffffff;
line-height: 24px;
height: 24px;
padding: 0px 6px 0px 6px;
}a: #ffffff; is not correct. a is a selector for an anchor element.
did you mean to set the list element to white? Or were you trying to set a color for an anchor element inside a list element?
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
one thing really quick:
.menu-item li { a: #ffffff; line-height: 24px; height: 24px; padding: 0px 6px 0px 6px; }a: #ffffff; is not correct. a is a selector for an anchor element.
did you mean to set the list element to white? Or were you trying to set a color for an anchor element inside a list element?
I deleted it. It was just there from the beginning seeing what "li" actually changes.
Now it reads:
.menu-item li {
line-height: 24px;
height: 24px;
padding: 0px 6px 0px 6px;
}
the problem is still the gab, between the main navigation and the dropdown.
Offline
.menu-item span {
color: #000000;
line-height: 12px;
height: 12px;
font-size: 12px;
padding: 0px 9px 0px 9px;
}This is what's keeping the drop-downs from working correctly. Specifically, it looks like height: 12px; is messing things up. Span in an inline element so I don't think you can assign a height or width to it.
Are you trying to target the sub-menu list items (the drop downs) with this:
.menu-item li {
line-height: 24px;
height: 24px;
padding: 0px 6px 0px 6px;
}That may not work as you wish because it may not be specific enough. So if what you want to happen is not, try something like this as the selector:
ul.sub-menu li.menu-item
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
Hm, I will look into it.
Another question why is the Vegas Slideshow not showing up? ( http://chauser.eu/cp/en/home/ )
Never mind... It shows up now...
Last edited by christopherhauser (2016-10-11 23:33:30)
Offline
when I delet:
.menu-item span {
color: #000000;
line-height: 12px;
height: 12px;
font-size: 12px;
padding: 0px 9px 0px 9px;
}
the drop down is closer again, hwoever I have way to much space between the header and the menu...
Offline
Ok here we are; Problem: Distance between header and manu to big and the distance between "info" and the rest is to big...
here is the current code:
.primary-menu {
border-top: 0px solid black;
border-bottom: 0px solid black;
line-height: 12px;
padding: 0px 0px 0px 0px;
}
.menu-item a:link, a:visited {
color: #000000;
line-height: 12px;
height: 12px;
font-size: 12px;
padding: 0px 8px 0px 8px;
}
.menu-item li {
border-top: 0px solid black;
line-height: 24px;
height: 24px;
padding: 0px 6px 0px 6px;
}
.menu-item a:link, a:visited {
color: #000000;
}
.menu-item a:hover {
color: #2196F3;
}
Offline
the drop down is closer again, hwoever I have way to much space between the header and the menu...
Have you tried adjusting the masthead padding?
Rod
Just a user with way too much time on his hands.
www.rodbarbee.com
ttg-tips.com, Backlight 2/3 test site
Offline
Hi Christopher,
Looks like you have your primary-menu line height set here to 12px
.primary-menu {
border-top: 0px solid black;
border-bottom: 0px solid black;
line-height: 12px;
padding: 0px 0px 0px 0px;
}
But you also have a line height of 44px set for the nav which I think is set in Backlight.
nav a, nav span {
height: 44px;
line-height: 44px;
}
I believe that the span element is pushing your drop down away from the rest of the menu.
Try setting the height of your navigation in Backlight to 12px
Offline
the drop down is closer again, hwoever I have way to much space between the header and the menu...
Have you tried adjusting the masthead padding?
Yes, but that is nor the problem. (If changing it it moves the border not closer or further away from the logo)
I fixed the distance between the navigation and the distance to the logo with:
.menu-item span {
line-height: 12px;
padding: 0px 8px 0px 8px;
}
The problem I still have is fixing and editing the actual drop down menu. I have trouble just targeting it and changing it. Currently it is to far away from the menu...
If you check the site it might take a few refreshs as I'm currently trying to target it with different approaches...
EDIT: I can target it with .menu-item li the problem is only I don't have a clue how to move it.
Last edited by christopherhauser (2016-10-12 17:17:15)
Offline
In general, you should look at the existing stylesheet and how it's already targeting things, then use the same format.
Offline
aha...
Offline
No really any progress... So how do I move the dump thing ? AND WHY are the links with the drop down blue...
Here is the current code: I tried to explain what everything does, NOW I tried a lot...
(is used to space everything from the header)
.primary-menu {
padding: 6px 0px 0px 0px;
}
(used to set size and distance between main links)
.menu-item a:link, a:visited {
line-height: 12px;
height: 12px;
font-size: 14px;
padding: 0px 8px 0px 8px;
}
(used to size and set distance between "info" and the rest.)
.menu-item span {
line-height: 12px;
padding: 0px 8px 0px 8px;
font-size: 14px;
}
(used for the shadow around the WHOLE box and some transparency test.)
.sub-menu {
box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.2);
background-color: rgba(255, 255, 255, 0);
}
(used to make some space around the sub links... and some transparency test.)
.menu-item-has-children ul.sub-menu li {
background-color: rgba(255, 255, 255, 0.5);
padding: 4px 4px 4px 4px;
}
Offline
Ok fixed the nav bar...
Offline
Final code for the nav:
.primary-menu {
padding: 6px 0px 0px 0px;
}
.menu-item a:link, a:visited {
line-height: 12px;
height: 16px;
font-size: 14px;
padding: 0px 8px 0px 8px;
}
.menu-item span {
line-height: 12px;
padding: 0px 8px 0px 8px;
font-size: 14px;
height: 16px;
position:relative;
}
.sub-menu {
box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.1);
}
.menu-item-has-children ul.sub-menu li {
padding: 4px 4px 4px 4px;
position:relative;
}
.menu-item-has-children ul.sub-menu {
border:0px solid #000000;
}
nav ul li:hover > ul { top: 16px; }
nav li:hover a,nav li:hover span { color: #000000; }
nav li:hover,nav li:hover li { background-color: #ffffff; }
nav li a:hover,nav li span:hover { color: #2196f3; background-color: #ffffff; }
Offline