Archived topic
Split Logo Overlapping Slider Image
5 replies · Started by Gerson on May 1, 2019
Viewing posts 1–6 of 6
Hi, I'm having a bit of trouble with the way the logo and menu items are displayed. I'm wanting the logo in the middle of the header to over-hang the header - over the slider - so half the logo is below the header and half of it is on it. I also need the two menu times to be displayed one on either side of the logo - but I need them to look evenly spaced. Can you please help?
site is: https://myworklicense.com.au
Hi there,
so edit this CSS and add the line i have commented:
.site-branding,
.site-logo {
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
z-index: 200;
top: 0; /* Add this */
}Then add:
@media (min-width: 768px) {
.navigation-branding img {
height: 160px !important;
}
.main-navigation .main-nav {
width: 100%;
}
}Thanks David - that worked nicely! How can I move the menu items closer to the logo?
This part of the above CSS:
.main-navigation .main-nav {
width: 100%;
}Could add some margin to it like so:
.main-navigation .main-nav {
width: 100%;
margin-left: 10%;
margin-right: 10%;
}Brilliant!
Awesome - glad to be of help
This archived topic is closed to new replies.
