Jump to content

Making drop down menu further away from the header

Go to solution Solved by SaranyaDesigns,

Recommended Posts

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.

Edited by LukeView
adding link
Link to comment
  • Replies 6
  • Views 1.6k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

  • Solution

@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;
}

 

Link to comment

@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.

Link to comment
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?

Link to comment

@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:
image.thumb.png.7fe86970fe1f3dca456b7f43f65ff0f0.png

Edited by SaranyaDesigns
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.