Tagged: CSS, header, menu, navigation, placement
Hi there!
My new job has me working on their website, and since I am maintaining this, I chose to use enfold because of the amazing support you guys have had in the past!
I am trying to replicate header of their old website, because they like that one a lot.
I am trying to move the main nav menu over next to the logo like the link above. I can get close, but it is not responsive.
The site Im working on is czphxtest.com where I am using the enfold theme to build this out. Is this doable?
Also, Is it possible to get the separators to be not full height within the header, like the ones between the nav menu items?
Thank you so much!
Hi czphx,
Login details seem to not be working, could you check/verify please?
Thanks,
Rikard
Hi Rikard,
Sorry about that, I have included below.
Thanks again!
For an update, I have gotten the nav menu over where I want it, but now I am trying to add a separator, but is it possible to make it not full height of the header? When I turn on separators between the menu items they are exactly what I want, but when I add them to the menu itself, they become much taller. I am looking for something similar to czphx.com.
One part that didnt move was the social icons. They remain a problem with responsive, because they did not move over with the menu it looks like? is there a way to tack that in place relative to the right of the screen so it plays nice?
Thank you!
Hi,
Thank you for the info.
Create a separator with this:
.logo a:before {
content: '';
height: 20px;
width: 1px;
background: #ffffff;
position: absolute;
display: block;
right: 20px;
top: 25px;
}
Where do you want to place the social icon? We enabled it back and the position looks good.
Best regards,
Ismael