Main & Mobile Navigation

I Need Help
1

Hi everyone,

I’m running into a couple of issues with my navigation and would really appreciate some guidance.

1. Main navigation (hover colour)
I’ve set my menu links to change to a teal colour on hover, but instead they appear as a very light grey. I’ve tried adjusting the styles in Blocs, but the hover colour doesn’t seem to apply correctly.

2. Mobile menu (layout + styling)
I’m having a few challenges with the mobile menu:

  • The links are currently aligned to the top — I’d like them centred vertically in the middle of the screen
  • The hover effect isn’t matching the desktop navigation (should be the same teal)
  • The background is solid black, but I want it to match the desktop menu (dark grey with a subtle pixel/texture effect)

Here’s the site for reference:
https://sajshafique.com (still a work in progress)

If anyone has come across similar issues or can point me in the right direction, I’d really appreciate it.

Thanks in advance!

2

Hello SajDXB,

Try this out, put it in your Project Header using the Code Editor. Go to the file menu Window > Code Editor and select Project Header and paste this code into it.

Please let me know how it turns out.

P.S. I like your site it’s great!

Calibinder

<style>
/* Desktop + general nav hover/active teal */
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show,
.navbar-nav .nav-item.active .nav-link,
.navbar-nav li a:hover,
.navbar-nav li a.active {
	color: #00d6d6 !important; /* CHANGE HOVER/ACTIVE COLOR HERE */
}

/* Blocs fullscreen mobile navigation fix */
@media (max-width: 991px) {

	/* Fullscreen mobile menu panel */
	.nav-special.fullscreen-nav,
	.open.nav-special.fullscreen-nav {
		width: 100% !important;
		height: 100vh !important;
		min-height: 100vh !important;
		top: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		left: 0 !important;
		position: fixed !important;
		overflow: hidden !important;
	}

	/* MOBILE MENU BACKGROUND
	   Change #1f1f1f if you want the base dark grey lighter/darker.
	   The radial-gradient creates the subtle pixel/texture effect. */
	.blocsapp-special-menu blocsnav,
	.nav-special.fullscreen-nav blocsnav {
		background-color: #1f1f1f !important;
		background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px) !important;
		background-size: 4px 4px !important;
		background-position: center center !important;
		background-blend-mode: normal !important;
	}

	/* The actual Blocs nav wrapper */
	.nav-special.fullscreen-nav .site-navigation {
		position: absolute !important;
		top: 50% !important;
		left: 50% !important;
		transform: translate(-50%, -50%) !important;
		width: 100% !important;
		max-width: 100% !important;
		margin-top: 0 !important;
		text-align: center !important;
	}

	/* Remove Blocs item offset */
	.nav-special.fullscreen-nav .nav-item {
		position: static !important;
		top: auto !important;
		margin-top: 0 !important;
		margin-bottom: 18px !important;
		text-align: center !important;
		width: 100% !important;
	}

	/* Mobile links */
	.nav-special.fullscreen-nav .nav > li a,
	.nav-special.fullscreen-nav .navbar-nav li a,
	.nav-special.fullscreen-nav .nav-link {
		color: #ffffff !important;
		font-size: 28px !important;
		font-family: "Lato" !important;
		font-weight: 700 !important;
		text-align: center !important;
	}

	/* Mobile hover + active color
	   Change #00d6d6 below if you want a different hover/active color. */
	.nav-special.fullscreen-nav .nav > li a:hover,
	.nav-special.fullscreen-nav .navbar-nav li a:hover,
	.nav-special.fullscreen-nav .nav-link:hover,
	.nav-special.fullscreen-nav .nav-link.active,
	.nav-special.fullscreen-nav .nav-item.active .nav-link {
		color: #00d6d6 !important;
	}
}
</style>
1 Like