Magazine Pro – help with tweaks.

[jourdain]

Hello fine people, I have a couple of questions that I was hoping you could help me with, with mostly relating to the large header image I have opted for on my site. (Size = 1440 x 400).

Link: http://creativefreaks.co.uk/

1. How can I remove the header image link which currently takes you to the homepage?

2. I would also like to only display the image on the home page and removed for all other pages/categories.

3. Would it be possible to add a tagline, maybe something this length "This is some tagline text for the homepage", that is over the image. (See below for example)

I Would also like to change the the second navigation on the page (Tutorials, Inspiration, Articles, Featured, Creative) to full width and sticky at some point. I just wanted to highlight this as it may affect your suggestions.

Thanks in advance to any replies.

Jourdain

[Lauren @ OnceCoupled]

1. I would do this by changing some of the CSS styles. I'd make the background image apply to .title-area or .site-title rather than .site-title a. Then you can basically hide the link while the image appears.

2. Use .home before your selector, then code a second one without it that doesn't have the background image or height. So you may have .home site-title { background-image: url; height: 400px; } then .site-title { background-image: none; height: 0; }`

3. Yup, just code .site-description and remove the height: 0; and text-indent: -9999px; from it. You'll need to do some additional styling to get it over the image, which will depend on weather you use .title-area (probably will need margin-top to be positive) or .site-title (in which case negative margin-top ).

That's a basic overview, it should at least get you on the right track to look up more information if you need to. 😉

Best,
Lauren

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[jourdain]

Amazing! I will try this later. Also do you have any thoughts on making the second navigation sticky and full width, 100% of the browser?

Thanks again!

Jourdain

[Lauren @ OnceCoupled]

To make it full width:

.nav-secondary .wrap {
     border-top: 1px solid #222;
     border-bottom: 1px solid #222;
     max-width: 100%;
     padding: 0 20px;
     margin-top: -1px;
}

To make it sticky, you'll want to use some jquery. Here's a good starting point:
http://sridharkatakam.com/displaying-fixed-navigation-menu-upon-scrolling-genesis/

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[jourdain]

I have added the code like you mentioned, the code snippets are displayed below incase anyone else needs them in the future:

.site-title a{
  display: none !important;
  }

.home .site-title {
	font-family: 'Raleway', sans-serif;
	font-size: 48px;
	line-height: 1;
	margin-bottom: 0;
  background: url(http://creativefreaks.co.uk/wp-content/uploads/2014/05/1140x400.gif) no-repeat !important;
  height: 400px;
}

I do still have one problem in relation to the tagline text. If I code it the way you have suggested then where will I type the physical text. I'm not sure if I am being a total idiot or have missed your point.

Jourain

[Lauren @ OnceCoupled]

Ah, that will be in your WordPress settings. Settings > General >Tagline. 🙂

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[jourdain]

Amazing, thanks for your help with all this. Just added the code you suggested to make the menu full width. I had to add a media query to make it look ok in the responsive design.

While we are on a roll with css I am also trying to get the top menu to look like the menu displayed on WordPress explorer.
Link: http://www.wpexplorer.com/

So the Site title is displayed on the left with log and all other items on the right. Do you have any pointers?

Jourdain

[jourdain]

I'm am having trouble with the tagline. Please could you assist me with the CSS. Sorry be cheeky and keep asking 🙂

Jourdain

[Nat]

Jourdain - Sorry for butting in. Just want to ask which plug in you are using for related posts?

[jourdain]

I didn't use a plugin, I followed this tutorial http://designsbynickthegeek.com/tutorials/related-posts-genesis and then added some styling with CSS.

Hope this helps you.

[Lauren @ OnceCoupled]

Nav: remove the width from the UL and float it right. I'd use a background image aligned left center to add the logo. Will need to pay attention to mobile responsive functions when making these changes.

Tagline/Site description: have a look at #3 in my first response. You need to remove the height and text-indent from anywhere referencing your .site-description (so that it will appear) and then apply the CSS styles that you want it to have.

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[jourdain]

Thanks for your help, I now have the tagline displayed and the navigation li elements aligned where I would like them.

I have a couple more questions, if you have any patience left:

1. When the menu item is hovered the background image will be removed/hidden. Is there a way to prevent this?

2. Also I would like to move the text (Home) over to the right so that it is not overlapping the background image. For some reason I can't find the correct selector and CSS. Having a dumb moment 🙂

Thanks again for your help with my customizations, it really is appreciated.

Jourdain

[jourdain]

I have worked it out now. Link if you would like to see: http://creativefreaks.co.uk/

Jourdain

[Lauren @ OnceCoupled]

Glad you got it worked out! 🙂

---

We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com

[Author]

Posts