Vertical align main menu with logo

Question

I know this has been asked before and I'm using past solutions to edit my code but my code will not reflect any changes I make.

I want to vertically align my main menu with my logo. I've tried adding the vertical-align:middle code to this css and it did not work. I've also tried to increase my padding-top to 25 px but after I update the CSS there is no change reflected.

Also, I opened up Google Chrome inspector and adjusted the code there and it does apply the change to the padding but like I said, when I try to update padding and save it on my style-css it does not take the change.

Here's my code in entirety for the main menu.

/* MAIN MENU */

    .menu-main { padding-top:5px; float:right; }
    /* Menu Elements */
    .menu-main li a { padding:10px; font-size:1.1em; color:#99a; }
    .menu-main li a .menu-description { }
    .menu-main li:hover > a, 
    .menu-main li a:hover { }
     /* Current item highlight both normally and on hover */
    .menu-main .current-menu-ancestor > a, 
    .menu-main .current-menu-item > a { }
    .menu-main .current_page_ancestor > a:hover, 
    .menu-main .current-menu-item > a:hover { }
     /* Children Elements */
    .menu-main .menu-item-has-children:before { color:#ccc; content:'\f107'; font-size:10px; }
    .menu-main li ul { margin:5px 0 0; padding:10px; background:#fff; background:rgba(255,255,255,0.9); border:1px solid #eee; -moz-transition-delay:0.2s; -webkit-transition-delay:0.2s; transition-delay:0.2s; }
    .menu-main > li > ul:before { visibility:hidden; content:' '; opacity:0; margin:0; position:absolute; top:0; left:20px; margin:-11px 0 0; border-bottom:10px solid #ddd; border-left:10px solid transparent; border-right:10px solid transparent; z-index:9999; }
    .menu-main > li > ul:after { visibility:hidden; content:' '; opacity:0; margin:0; position:absolute; top:0; left:20px; margin:-10px 0 0; border-bottom:10px solid #fff; border-left:10px solid transparent; border-right:10px solid transparent; z-index:9999; }
    .menu-main li ul li a { text-transform:none; font-size:0.9em; }
    .menu-main li ul li:hover > a, 
    .menu-main li ul li a:hover { background-color:none; }

There is no HTML markup because this is via Wordpress and I'm only editing the css. — Meg Bogart, Apr 02 '18 at 20:53
View source and grab the html part, or at least make a simplified example. How do you solve this without seeing the html structure? — Huangism, Apr 02 '18 at 20:58
Ugh this is so frustrating. I can't seem to make any adjustments to my main menu code - even to the font, hover color etc. — Meg Bogart, Apr 02 '18 at 21:06

score 0 · Accepted Answer · answered Apr 02 '18 at 21:14

0

I don't believe this has to do with CSS. Depending on your plugins, there's a highly likely scenario that your files are being cached.

WordPress website still loading old style.css

answered Apr 02 '18 at 21:14

Jorjon

5,316
1
41
58

1

Thank you so much, this was the issue after all. So frustrating to spend so much time on this with such a simple solution. – Meg Bogart Apr 03 '18 at 00:55

Vertical align main menu with logo

I know this has been asked before and I'm using past solutions to edit my code but my code will not reflect any changes I make.

1 Answers1