CODEWITHSUNDEEP
htmlcsswordpress
user5072259
user5072259

Reputation:

Navigation link spacing is too far - WP

Here's our site: http://gringlishgirl.com/

I am trying to place all of my links on one line however for some reason the spacing between each links (menu) is a bit far that makes them sit on the next line. Here's what I have right now.

enter image description here

Now I want them to sit next to each other and change the color of each link like this:

enter image description here

But for some reason I tried to tweak my CSS below but still can't fix it.

/*--------------------------------------------------------------
- Header > Main
--------------------------------------------------------------*/
#site-header { position: relative }
.footer-has-reveal #site-header { background: #fff }
.footer-has-reveal #site-header.overlay-header { background: none }
#site-header-inner { position: relative; padding-top: 30px; padding-bottom: 30px; }
#site-navigation.container { position: relative }

/* Header > Main > Logo */
#site-logo a { max-width: 100%; padding: 0px; margin: 0px; text-decoration: none; color: #222; font-size: 24px; margin: 0; font-weight: bold; }
#site-logo a .fa { margin-right: 10px }
#site-logo a:hover { text-decoration: none }
#site-logo img { display: block; max-height: 100%; max-width: 100%; vertical-align: middle; }

/* Header > Main > Shrink Fixed */
body.shrink-fixed-header #site-header-sticky-wrapper.is-sticky #site-header { padding-top: 15px; padding-bottom: 15px; }
body.shrink-fixed-header #site-header-sticky-wrapper.is-sticky #site-header-inner { padding-top: 0; padding-bottom: 0; }
body.shrink-fixed-header #site-header-sticky-wrapper.is-sticky #site-header-inner,
body.shrink-fixed-header #site-header-sticky-wrapper.is-sticky .header-one #site-logo,
body.shrink-fixed-header #site-header-sticky-wrapper.is-sticky .header-one #site-logo * { height: 40px; line-height: 40px; }
body.shrink-fixed-header #site-header-sticky-wrapper.is-sticky .header-one #site-navigation-wrap { margin-top: -15px; top: 0; }
body.shrink-fixed-header #site-header-sticky-wrapper.is-sticky .header-one #site-navigation-wrap #site-navigation { background: none }
body.shrink-fixed-header #site-header-sticky-wrapper.is-sticky .header-one #site-navigation-wrap,
body.shrink-fixed-header #site-header-sticky-wrapper.is-sticky .header-one .dropdown-menu > li > a { height: 70px; line-height: 70px; }
body.shrink-fixed-header #site-header-sticky-wrapper.is-sticky #searchform-header-replace input { font-size: 21px }
body.shrink-fixed-header #site-header-sticky-wrapper.is-sticky #current-shop-items-dropdown,
body.shrink-fixed-header #site-header-sticky-wrapper.is-sticky #searchform-dropdown { margin-top: 15px }

But still it won't fix my codes? How can I make them sit next to each other on one line and change the color of each link? Care to help?

You can use Chrome to inspect element our site: http://gringlishgirl.com/

Any help? Thanks in advance I am really stuck.

Upvotes: 1

Views: 98

Answers (1)

morcen
morcen

Reputation: 368

This is the culprit for the wide spacing:

.sf-menu {
  word-spacing: 100px;
}

While this is for the font-size:

#site-navigation .dropdown-menu a {
  ...
  font-size: 1.5em;
  ...
}

I just removed those and it looked like this: enter image description here

Upvotes: 1

Related Questions