Site Title and Nav Menu formatting

[ollieMember]

Hi all,

I'm hoping to get my site title to match my nav menu in terms of text size and alignment/positioning but it's proving tricky. I'm using Parallax Pro which makes the site title slightly larger by default, I can reduce the size in the stylesheet but haven't been able to figure out how to match the alignment of the nav menu (when I reduce the title size, the alignment is off).

.site-title {
	font-family: Montserrat, sans-serif;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 1px;
	line-height: 1;
	margin-bottom: 0;
	text-transform: uppercase;

.genesis-nav-menu {
	clear: both;
	color: #7a7a7a;
	font-family: Montserrat, sans-serif;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 1px;
	line-height: 1;
	width: 100%;
}

.genesis-nav-menu .menu-item {
	display: inline-block;
	text-align: left;
}

.genesis-nav-menu li li {
	margin-left: 0;
}

.genesis-nav-menu a {
	color: #7a7a7a;
	display: block;
	font-family: Montserrat, sans-serif;
	padding: 27px 20px;
}

[ollieMember]

Update: The inconsistent text position seems to be due to the presence of this weird gap beneath the site title...

...and even when I make the title area div 70px high to match the nav menu, the text still aligns itself differently...

Any suggestions very much appreciated! I'm baffled.

[WisdmLabsMember]

Hi,
Change the font-size of .site-title from 30px to16px to match the font-size of navigation items.

The gap which you can see is padding of the title-area. So, change the padding-top and padding-bottom of the .title-area from 20px to27px.

To summarize, CSS should be as below:

.title-area {
     padding: 27px 0;
}
.site-title {
     font-size: 16px;
}

---

http://wisdmlabs.com/

[ollieMember]

Ha, as simple as that! Thanks so much for your help, it's very much appreciated.

[Author]

Posts