Making drop down menu further away from the header

I'm trying to make the drop down be placed further down when hovering over services so its below the top nav.

I'm also trying to make the text highlighted in the top nav whenever you hover over it. Whether that be with a line underneath or something else. And to apply this to the drop down menu when the user hovers over any link there too.

link: https://www.viewagency.co.uk

Password is viewtest.

@LukeView can you include link to your site please? 🙂

@LukeView and then for the "highlight", you could add a pseudo element with some animation:

.header-nav-item a:after {
	content: '';
	display: block;
	border-bottom: 2px solid #000;
  	transform: scaleX(0);  
  	transition: transform 250ms ease-in-out;
	transform-origin:  0% 50%;
}
.header-nav-item a:hover:after {
    transform: scaleX(1);
}

You may need to play with position/spacing because of the padding we just added to push the submenu down, so might need to add a negative top margin... but need to see it in action first.

18 minutes ago, SaranyaDesigns said:

@LukeView  try this?

.header .header-nav-wrapper a, .header .language-item a {
	padding: 1.25em 0;
}
.header .header-announcement-bar-wrapper {
	padding: 0 3vw;
}

You may need to include !important if it's not overriding the existing styles, like this:

.header .header-nav-wrapper a, .header .language-item a {
	padding: 1.25em 0 !important;
}
.header .header-announcement-bar-wrapper {
	padding: 0 3vw !important;
}

 

Thank you for sending both across, really appreciate it! 🙂 

The box positioning is now perfect, I'm just trying to reduce the space between the headings 'Email Marketing' and 'Social Media Marketing'

I thought this was in: 

.header-nav-folder-content a {padding-bottom:.5rem!important;}

but after changing the padding, it doesn't seem to change it. Any ideas on how to reduce it?

@LukeView ok how about this:

.header-nav-folder-content .header-nav-folder-item a {
	padding: 0.5em 0 !important;
}

if that doesn't work, you may need to adjust the original padding we added to target more specifically... so this one:

.header .header-nav-wrapper a, .header .language-item a {
	padding: 1.25em 0;
}

change the selectors to something more specific, like

.header .header-nav-item>a {
	padding: 1.25em 0;
}

Then see if it picks up your other CSS - your thought was correct, but it's being overridden by the new snippet we added, you can see it in the inspector window:

9 minutes ago, SaranyaDesigns said:

@LukeView ok how about this:

.header-nav-folder-content .header-nav-folder-item a {
	padding: 0.5em 0 !important;
}

 

Perfect, that's sorted it. Thank you very much!