[Resolved] How to make small "new box" above any of the header menu.

Home Forums Support [Resolved] How to make small "new box" above any of the header menu.

Home Forums Support How to make small "new box" above any of the header menu.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #903304
    Afeef

    Please check the attached.

    View post on imgur.com

    Thank you.

    #903366
    David
    Staff
    Customer Support

    Hi there,

    will require adding some HTML and a CSS class to your menu, check this article first to see how to add CSS Classes to menu items:

    https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes

    Then for each of the menu items you want the colored label added give it a class of:

    menu-label

    Then you need to edit the Menu Label itself and add some HTML so:

    Home becomes Home<span class="green">New</span>

    Now add this Additional CSS:

    .menu-label {
    	position: relative;
    }
    .menu-label span {
    	position: absolute;
    	top: -4px;
    	left: 20px;
    	font-size: 0.7em;
    	padding: 3px;
    	line-height: 1;
    	color: #fff;
    	border-radius: 2px;
    }
    .menu-label span.green {
    	background-color: green;
    }

    Simply add the HTML required for each menu item, within its specific span tag you can add a different color and create a new CSS Rule for it. E.g

    Services<span class="red">New</span>

    And this additional CSS:

    .menu-label span.red {
    	background-color: red;
    }

    To add the button in the menu this article explains:

    https://docs.generatepress.com/article/adding-buttons-navigation/

    #905067
    Afeef

    it’s not working David, I’m i missing anything?

    #905086
    Afeef

    Did it by viewing with browser “inspect element” but cannot find the HTML code in header.php or page HTML itself to edit and save. any idea where to add the span code?

    Thanks,

    #905125
    David
    Staff
    Customer Support

    You shouldn’t be editing any of the templates, you just need to edit your Menu in Appearance > Menus and then add that HTML as the menu label.

    #905357
    Afeef

    Perfect! Thanks…

    #905465
    David
    Staff
    Customer Support

    Glad to be of help

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.