How to move words in header

Moesia
#1

Hello,

I have 4 words (pages) in my header (home, about us, events, contact us) and I’d like to move them down so that they’re in the middle of the header. I don’t want to change the size of the header; just move the words down. I added the following code to my css but it didn’t work. Can anyone help please?

Thank you!

Website: http://www.ishqmatters.com/

.main-navigation ul
{
padding-top: 30px;
}

#2

Hello there,

Thank you for asking.

In order to achieve that objective, could you please try to add the following CSS code through the Simple Custom CSS plugin?

@media only screen and (min-width: 992px){

  .menu{
    position: relative;    
    height: 95px;
    display: table;      
    float: right;
  }
  
  .menu > ul{
    display: table-cell;
    vertical-align: middle;
    float: none;
  }
  
}

Let me know how it goes. I’ll wait to hear back from you regarding your stats.

Warmest regards,
Kharis

#3

@Kharis: I don’t have that plugin installed so I went to Appearance and Editor and tried adding the code but it didn’t work. Do I need to use the plugin?

Thank you for your help!

#4

Hello there,

Thank you for reporting.

I noticed incorrect selector in this line .menu > ul{ in moesia-child/style.css. Insert the following code.

@media only screen and (min-width: 992px){

  .menu{
    position: relative;    
    height: 95px;
    display: table;      
    float: right;
  }
  
  .menu > ul{
    display: table-cell;
    vertical-align: middle;
    float: none;
  }
  
}

Could you please try to paste the code right after the @import url("…/moesia/style.css"); line?

Let me know how it goes. I’ll wait to hear back from you regarding your stats.

Warmest regards,
Kharis

#5

@Kharis: That did it! Thank you so much for your help. I really appreciate it :slight_smile: