Secondary Menu Formatting

  • Author
    Posts
  • #150974

    fisheref
    Member

    Hi there,

    I read some questions here about how to add columns in the secondary menu so that the items don’t stack but is there custom CSS that could stack them intentionally? Specifically, I want to stack the “Donate Today” and “Coming Events” buttons and make them two different colors.

    Thanks in advance!

    The blog I need help with is greenenergyohio.org.

    #150982

    tarasdashkevych
    Theme Author

    Hello,

    Please remove custom CSS classes for these menu items, and try this custom CSS instead:

    
    /* Donate link */
    .secondary-navigation .menu > li:nth-child(2) > a {
      background-color: red;
    }
    
    /* Events link */
    .secondary-navigation .menu > li:nth-child(3) > a {
     background-color: blue; 
    }
    
    /* Events menu item */
    .secondary-navigation .menu > li:nth-child(3) {
      border: none;
      padding-left: 0;
      margin-left: 0;
    }
    

    Hope this helps. Let me know if you have any additional questions.

    Thank you,
    Taras

    #150985

    fisheref
    Member

    Thanks so much for your quick response!

    When I removed the custom CSS within the secondary menu and added the CSS above in the CSS customizer, it put the two links directly next to one another but didn’t stack them.

    I was hoping to keep the links appearing as buttons (which I achieved before with the custom CSS classes, I think) but have them sit in the same column space one above the other.

    #151003

    tarasdashkevych
    Theme Author

    I’ve just checked your site and it looks like you were able to apply custom colors to these menu items. Please let me know if you need any additional help with these buttons.

    Thank you,
    Taras

    #151008

    fisheref
    Member

    Hi Taras,

    Sorry for the confusion, my question is how can I get the buttons to sit one above the other within the same column space. The colors/appearance of the buttons themselves was more of a secondary question.

    I want to stack the “Donate Today” and “Coming Events” buttons on top of each other, in the same column space, but without them touching.

    #151016

    tarasdashkevych
    Theme Author

    Thank you providing an additional info and I apologize for a misunderstanding. Please add this custom CSS:

    
    @supports (display: grid) {
    	.secondary-navigation > div > ul {
    		display: grid;
    		grid-column-gap: 40px;
    		grid-template-columns: repeat(2, 1fr);
    		grid-template-rows: repeat(2, 1fr);
    	}
    
    	.secondary-navigation > div > ul > li {
    		border: none;
    		margin-left: 0;
    		padding-left: 0;
    	}
    
    	/* The first menu item */
    	.secondary-navigation > div > ul > li:nth-child(1) {
    		grid-column: 1 / 1;
    		grid-row: 1 / -1;
    	}
    
    	/* The 2nd and 3rd menu item links */
    	.secondary-navigation > div > ul > li:nth-child(2) a,
    	.secondary-navigation > div > ul > li:nth-child(3) a {
    		height: 100%;
    		display: flex;
    		justify-content: center;
    		align-items: center;
    	}
    }
    

    Let me know if you have any other questions.

    Thank you,
    Taras

    #151026

    fisheref
    Member

    Thanks so much, this worked perfectly!

    #151152

    tarasdashkevych
    Theme Author

    You are very welcome ! :)

The topic ‘Secondary Menu Formatting’ is closed to new replies.