Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Worked off a starter theme (html5blank).
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Are you familiar with CSS?
You need to use CSS positioning on your submenu to move it upwards.
The sub-menu has margins so when you hover over that blank space the sub-menu closes. Add this CSS on your theme.
.nav .sub-menu {
margin: 0;
}
@andrew: A moderate amount really. I’m having trouble though on how I would input the positioning code.
@ronangelo: I added that but now the drop down links are appearing side by side, even pushing the rest of the page down. 🙁
Are you sure that’s all you’ve added?
looks like you’ve edited a certain “position:absolute”
Yes. I was attempting what Andrew suggested but it wasn’t working out so I undid the changes to try your suggestion.
There isn’t any ‘position:absolute’ anymore though. o.o
.nav .sub-menu {
position: absolute;
margin: 0;
}
Ah yes it works now. Thank you very much ronangelo! 🙂
Oh any idea on how I would be able to add separators?
Oh as I mentioned in my first post. The / between each item: http://d.pr/i/X8pR
You could try something like this
.nav > ul > li a:after {
content: "/";
color: #AAA;
font-weight: normal;
padding: 0 0 0 14px;
}
it could also be an image
.nav > ul > li a:after {
content: " ";
background-image: url("image.jpg");
}
It works. 🙂 Slight issue though, it seems to get added to the drop down links as well.
change this
.nav > ul > li a:after {
to this
.nav > ul > li > a:after {
Yep, that did it. Thank you so much for all your help! Appreciate it. 😀
