Before you ask please READ THIS

style menu item as button

in Rife Posts: 20
hi there,

I'd like to style a specific menu-item into a button. In the file attached you can see that I tried this with the menu option 'Contact'. I am almost there, but the menu-text is being pushed down. Here is the css used.

.menu-popup{
background: #c39442;
height:35px;
padding: 0 20px 0 20px;
border-radius: 25px;
}

Do you have some advise for me on how to style this the right way?

Thx, André
Schermafbeelding 2021-05-28 om 12.40.13.png
1920 x 1200 - 2M

Comments

  • AirAir
    Posts: 10,970
    Hey :-)

    As there is lot of styling based on the line-height property, it could be hard to achieve what you like.

    You have to consider also what will happen with this in mobile menu, as these styles will affect it as well.

    Best I could come up is changing your styles to something like this:
    .menu-popup{
    	background: #c39442;
    	height:35px;
    	padding: 0 20px 0 20px;
    	border-radius: 25px;
    	vertical-align: 46px !important;
    }
    .menu-popup a {
        line-height: 35px !important;
        height: 35px !important;
    }
    However, because of using !important it is not best and elastic solution.

    To use it only for normal menu, you could wrap this whole style like this:
    @media only screen and (min-width: 1025px) {
    	.menu-popup{
    		background: #c39442;
    		height:35px;
    		padding: 0 20px 0 20px;
    		border-radius: 25px;
    		vertical-align: 46px !important;
    	}
    	.menu-popup a {
    		line-height: 35px !important;
    		height: 35px !important;
    	}
    }
    With kind regards.


  • Posts: 20
    I understand the complexity. But your proposal works for me (for now ;-0). Thanks a lot for your help.

    Best, André
  • AirAir
    Posts: 10,970
    Great to hear!

    Have a great weekend!
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

In this Discussion