CSS for Navigation Menu

If you are wondering about getting CSS styles for the Navigation Menu Block of your WordPress Block Editor, you are in the right place buddy.

Navigation Menu Item Hover Red Brick Style –

To get the Block or CSS click here ⥅

Copy the Block from and paste in your editor ↓

<!-- wp:navigation {"ref":365,"className":"nav-menu-style-1 ticss-17160c56","layout":{"type":"flex","justifyContent":"center"},"hasCustomCSS":true,"customCSS":".nav-menu-style-1-item{\t\n  Padding:10px!important;\n  text-transform:uppercase;\ncursor: pointer;}\n.nav-menu-style-1-item:hover {\n  background-image: url('https://scottyzen.sirv.com/Images/v/button.png');\n  background-size: 100% 100%;\n  color: #27262c;\n  animation: spring 300ms ease-out;\n  text-shadow: 0 -1px 0 #ef816c;\n\tfont-weight: bold;\n}\n.nav-menu-style-1-item::active {\n  transform: translateY(4px);\n}\n@keyframes spring {\n  15% {\n    -webkit-transform-origin: center center;\n    -webkit-transform: scale(1.2, 1.1);\n  }\n  40% {\n    -webkit-transform-origin: center center;\n    -webkit-transform: scale(0.95, 0.95);\n  }\n  75% {\n    -webkit-transform-origin: center center;\n    -webkit-transform: scale(1.05, 1);\n  }\n  100% {\n    -webkit-transform-origin: center center;\n    -webkit-transform: scale(1, 1);\n  }\n}\n"} /-->

You will need Block CSS plugin by Themeisle to get the exact block style.

If you need only the CSS code here it is ↓

.nav-menu-style-1-item{	
  Padding:10px!important;
  text-transform:uppercase;
cursor: pointer;}
.nav-menu-style-1-item:hover {
  background-image: url('https://scottyzen.sirv.com/Images/v/button.png');
  background-size: 100% 100%;
  color: #27262c;
  animation: spring 300ms ease-out;
  text-shadow: 0 -1px 0 #ef816c;
	font-weight: bold;
}
.nav-menu-style-1-item::active {
  transform: translateY(4px);
}
@keyframes spring {
  15% {
    -webkit-transform-origin: center center;
    -webkit-transform: scale(1.2, 1.1);
  }
  40% {
    -webkit-transform-origin: center center;
    -webkit-transform: scale(0.95, 0.95);
  }
  75% {
    -webkit-transform-origin: center center;
    -webkit-transform: scale(1.05, 1);
  }
  100% {
    -webkit-transform-origin: center center;
    -webkit-transform: scale(1, 1);
  }
}

Note: There is a limitation in WordPress; you cannot copy and paste navigation menu items in another domain. If you copy the block code from here and paste in your website, then you will get the styled navigation block in your site.

After pasting the navigation block in your site you have to create your navigation menu based on your choice. SS of how it will be look like when you will paste the block in your site. SS: https://ibb.co/WzWYnNK

Then, in each of your navigation items, go to the advanced tab option and add this class “nav-menu-style-1-item“. And you will get the premade styles. You will find the Advanced tab in the item’s settings panel. Check SS – https://ibb.co/2nPjyWR

Navigation Menu Item With Pricing Button Style –

To get the Block or CSS click here ⥅

Copy the Block from and paste in your editor ↓

<!-- wp:navigation {"ref":376,"className":"nav-menu-style-1 ticss-17160c56","layout":{"type":"flex","justifyContent":"center"},"hasCustomCSS":true,"customCSS":".nav-menu-style-1-item-btn {\n  margin: 10px;\n  padding: 1px 30px!important;\n  text-align: center;\n  transition: 0.5s;\n  background-size: 200% auto;\n  color: white;\n  border-radius: 10px;\n  display: block;\n  border: 0px;\n  font-weight: 700;\n  box-shadow: 0px 0px 14px -7px #f09819;\n  background-image: linear-gradient(45deg, #FF512F 0%, #F09819  51%, #FF512F  100%);\n  cursor: pointer;\n  user-select: none;\n  -webkit-user-select: none;\n  touch-action: manipulation;\n}\n\n.nav-menu-style-1-item-btn:hover {\n  background-position: right center;\n  /* change the direction of the change here */\n  color: #fff;\n  text-decoration: none;\n  cursor: pointer;\n}\n\n.nav-menu-style-1-item-btn:active {\n  transform: scale(0.95);\n}\n.nav-menu-style-1-item-underline:hover{\n  text-decoration: underline dotted #FF512F;\ntext-underline-offset: 0.5em!important;\ncursor:pointer;\ntext-decoration-thickness:4px!important;}","gsMenuHoverDisableLine":true,"gsId":"44154af9-f387-4d03-97b8-2aea94718755"} /-->

You will need Block CSS plugin by Themeisle to get the exact block style.

If you need only the CSS code here it is ↓

.nav-menu-style-1-item-btn {
  margin: 10px;
  padding: 1px 30px!important;
  text-align: center;
  transition: 0.5s;
  background-size: 200% auto;
  color: white;
  border-radius: 10px;
  display: block;
  border: 0px;
  font-weight: 700;
  box-shadow: 0px 0px 14px -7px #f09819;
  background-image: linear-gradient(45deg, #FF512F 0%, #F09819  51%, #FF512F  100%);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.nav-menu-style-1-item-btn:hover {
  background-position: right center;
  /* change the direction of the change here */
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}

.nav-menu-style-1-item-btn:active {
  transform: scale(0.95);
}
.nav-menu-style-1-item-underline:hover{
  text-decoration: underline dotted #FF512F;
text-underline-offset: 0.5em!important;
cursor:pointer;
text-decoration-thickness:4px!important;}

Note: There is a limitation in WordPress; you cannot copy and paste navigation menu items in another domain. If you copy the block code from here and paste in your website, then you will get the styled navigation block in your site.

After pasting the navigation block in your site you have to create your navigation menu based on your choice. SS of how it will be look like when you will paste the block in your site. SS: https://ibb.co/WzWYnNK

Then, in the navigation items, go to the advanced tab option and add this class “nav-menu-style-1-item-btn” in the selected one where you want to add a button style to the menu bar. And you will get the premade styles. You will find the Advanced tab in the item’s settings panel. Check SS – https://ibb.co/2nPjyWR

Navigation Menu Item With Hover Animations Style –

To get the Block or CSS click here ⥅

Copy the Block from and paste in your editor ↓

<!-- wp:navigation {"ref":382,"className":"nav-menu-style-1 ticss-17160c56","layout":{"type":"flex","justifyContent":"center"},"hasCustomCSS":true,"customCSS":".nav-menu-style-3-item-hoveranimation {\n    -webkit-transition: 3s; /* For Safari 3.1 to 6.0 */\n    transition: 3s;\n}\n\n.nav-menu-style-3-item-hoveranimation:hover {\n    background: #DC6307;\n  color:white;\n  padding:6px 12px;\n  border:1px;\n  border-radius:10px!important;\n  cursor:pointer;\n}","gsMenuHoverDisableLine":true,"gsId":"3ff3c771-a1ae-4bb8-8e5d-b2e37ad23562"} /-->

You will need Block CSS plugin by Themeisle to get the exact block style.

If you need only the CSS code here it is ↓

.nav-menu-style-3-item-hoveranimation {
    -webkit-transition: 3s; /* For Safari 3.1 to 6.0 */
    transition: 3s;
}

.nav-menu-style-3-item-hoveranimation:hover {
    background: #DC6307;
  color:white;
  padding:6px 12px;
  border:1px;
  border-radius:10px!important;
  cursor:pointer;
}

Note: There is a limitation in WordPress; you cannot copy and paste navigation menu items in another domain. If you copy the block code from here and paste in your website, then you will get the styled navigation block in your site.

After pasting the navigation block in your site you have to create your navigation menu based on your choice. SS of how it will be look like when you will paste the block in your site. SS: https://ibb.co/WzWYnNK

Then, in the navigation items, go to the advanced tab option and add this class “nav-menu-style-3-item-hoveranimation” in the selected one where you want to add a button style to the menu bar. And you will get the premade styles. You will find the Advanced tab in the item’s settings panel. Check SS – https://ibb.co/2nPjyWR

Navigation Menu Item With Hover Color and Underline Animations Style –

To get the Block or CSS click here ⥅

Copy the Block from and paste in your editor ↓

<!-- wp:navigation {"ref":387,"className":"nav-menu-style-1 ticss-17160c56","layout":{"type":"flex","justifyContent":"center"},"hasCustomCSS":true,"customCSS":".nav-menu-style-4-item-hoveranimationcolor {\n           -webkit-transition: color 1s; /* For Safari 3.0 to 6.0 */\n        transition: color 1s; /* For modern browsers */\n \n}\n\n.nav-menu-style-4-item-hoveranimationcolor:hover {\n    color: #DC6307;\n  cursor:pointer;\ntext-decoration: #DC6307 wavy underline;\n  text-underline-offset: 0.5em;\n}","gsMenuHoverDisableLine":true,"gsId":"3ff3c771-a1ae-4bb8-8e5d-b2e37ad23562"} /-->

You will need Block CSS plugin by Themeisle to get the exact block style.

If you need only the CSS code here it is ↓

.nav-menu-style-4-item-hoveranimationcolor {
           -webkit-transition: color 1s; /* For Safari 3.0 to 6.0 */
        transition: color 1s; /* For modern browsers */
 
}

.nav-menu-style-4-item-hoveranimationcolor:hover {
    color: #DC6307;
  cursor:pointer;
text-decoration: #DC6307 wavy underline;
  text-underline-offset: 0.5em;
}

Note: There is a limitation in WordPress; you cannot copy and paste navigation menu items in another domain. If you copy the block code from here and paste in your website, then you will get the styled navigation block in your site.

After pasting the navigation block in your site you have to create your navigation menu based on your choice. SS of how it will be look like when you will paste the block in your site. SS: https://ibb.co/WzWYnNK

Then, in the navigation items, go to the advanced tab option and add this class “nav-menu-style-4-item-hoveranimationcolor” in the selected one where you want to add a button style to the menu bar. And you will get the premade styles. You will find the Advanced tab in the item’s settings panel. Check SS – https://ibb.co/2nPjyWR

Navigation Menu Item With Hover Underline and Overline Style –

To get the Block or CSS click here ⥅

Copy the Block from and paste in your editor ↓

<!-- wp:navigation {"ref":397,"className":"nav-menu-style-1 ticss-17160c56","layout":{"type":"flex","justifyContent":"center"},"hasCustomCSS":true,"customCSS":".nav-menu-style-5-item-hoverunderline-overline {\n           -webkit-transition: color 1s; /* For Safari 3.0 to 6.0 */\n        transition: color 1s; /* For modern browsers */\n \n}\n\n.nav-menu-style-5-item-hoverunderline-overline:hover {\n  cursor:pointer;\n  text-underline-offset: 0.5em!important;\n  text-decoration: underline overline #DC6307;\n}","gsMenuHoverDisableLine":true,"gsId":"3ff3c771-a1ae-4bb8-8e5d-b2e37ad23562"} /-->

You will need Block CSS plugin by Themeisle to get the exact block style.

If you need only the CSS code here it is ↓

.nav-menu-style-5-item-hoverunderline-overline {
           -webkit-transition: color 1s; /* For Safari 3.0 to 6.0 */
        transition: color 1s; /* For modern browsers */
 
}

.nav-menu-style-5-item-hoverunderline-overline:hover {
  cursor:pointer;
  text-underline-offset: 0.5em!important;
  text-decoration: underline overline #DC6307;
}

Note: There is a limitation in WordPress; you cannot copy and paste navigation menu items in another domain. If you copy the block code from here and paste in your website, then you will get the styled navigation block in your site.

After pasting the navigation block in your site you have to create your navigation menu based on your choice. SS of how it will be look like when you will paste the block in your site. SS: https://ibb.co/WzWYnNK

Then, in the navigation items, go to the advanced tab option and add this class “nav-menu-style-5-item-hoverunderline-overline” in the selected one where you want to add a button style to the menu bar. And you will get the premade styles. You will find the Advanced tab in the item’s settings panel. Check SS – https://ibb.co/2nPjyWR

Navigation Menu Item With Hover Underline Style –

To get the Block or CSS click here ⥅

Copy the Block from and paste in your editor ↓

<!-- wp:navigation {"ref":401,"className":"nav-menu-style-1 ticss-17160c56","layout":{"type":"flex","justifyContent":"center"},"hasCustomCSS":true,"customCSS":".nav-menu-style-6-item-hoverunderline {\n           -webkit-transition: color 1s; /* For Safari 3.0 to 6.0 */\n        transition: color 1s; /* For modern browsers */\n \n}\n\n.nav-menu-style-6-item-hoverunderline:hover {\n  cursor:pointer;\n  text-underline-offset: 0.7em!important;\n  text-decoration: underline #DC6307;\n text-decoration-thickness:4px!important; \n}","gsMenuHoverDisableLine":true,"gsId":"3ff3c771-a1ae-4bb8-8e5d-b2e37ad23562"} /-->

You will need Block CSS plugin by Themeisle to get the exact block style.

If you need only the CSS code here it is ↓

.nav-menu-style-6-item-hoverunderline {
           -webkit-transition: color 1s; /* For Safari 3.0 to 6.0 */
        transition: color 1s; /* For modern browsers */
 
}

.nav-menu-style-6-item-hoverunderline:hover {
  cursor:pointer;
  text-underline-offset: 0.7em!important;
  text-decoration: underline #DC6307;
 text-decoration-thickness:4px!important; 
}

Note: There is a limitation in WordPress; you cannot copy and paste navigation menu items in another domain. If you copy the block code from here and paste in your website, then you will get the styled navigation block in your site.

After pasting the navigation block in your site you have to create your navigation menu based on your choice. SS of how it will be look like when you will paste the block in your site. SS: https://ibb.co/WzWYnNK

Then, in the navigation items, go to the advanced tab option and add this class “nav-menu-style-6-item-hoverunderline” in the selected one where you want to add a button style to the menu bar. And you will get the premade styles. You will find the Advanced tab in the item’s settings panel. Check SS – https://ibb.co/2nPjyWR

Grab Your CSS Styles Here

Get All CSS Items In One Place

If you want to get all CSS items in one place, then visit here. We have added all the items listed there, and you will get all the resources of CSScrafter for free in one place.

All CSS Items In One Place →