Community Forums › Forums › Archived Forums › Design Tips and Tricks › Centric Pro nav hiding page content
Tagged: centric pro, navigation
- This topic has 9 replies, 2 voices, and was last updated 9 years, 7 months ago by Tonya.
-
AuthorPosts
-
September 11, 2014 at 1:07 am #123881tornadoParticipant
Hi folks.
On my website, the nav bar (in the Header Right widget) is hiding the top part of content on the homepage and all other pages.
It is more prominent on mobile devices. It can be seen also on the desktop, but it doesn't hide as much, as you can see here (or just shrink the browser and watch it consume everything at the top).
How can I force the content to NOT be layered below the nav bar?
Thanks!
G
http://0114webdesign.co.ukSeptember 11, 2014 at 1:47 am #123884TonyaMemberHi G,
You need to add margin-top to the next item below the header. For example, on your About me page, go to line 706 as follows:
.page-title { color: #fff; padding: 40px 0 80px; text-align: center; margin-top: 80px; /* adjust these pixels to what you want */ }
Then on your home page, you can adjust the home-featured widget by adjusting the padding on line 1380:
.home-featured .home-widgets-1 { display: inline-block; display: table-cell; vertical-align: middle; width: 100%; padding: 200px 0 50px; /* Less bottom padding to center up the down arrow icon */ font-size: 20px; }
Cheers,
Tonya
Software & Electrical Engineer and Programming Teacher 路 I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer BootcampSeptember 11, 2014 at 2:53 pm #124021tornadoParticipantTonya, you are awesome. Thank you so much for this.
BIG smiles!
G
September 12, 2014 at 10:13 am #124122TonyaMemberYou're very welcome. Always glad to help.
Software & Electrical Engineer and Programming Teacher 路 I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer BootcampSeptember 25, 2014 at 1:51 pm #125711tornadoParticipantHi Tonya.
Not sure if you'll still pick up on this...
I have fiddled with the code as above for the home page, but on a mobile device (like iPhone 5), most of the 'Home 1' widget area of the Centric theme (at the moment it just has an empty text widget in it to display the arrow - I want text in above it but it's pointless now because of this issue) is not visible (only the bottom part shows).
Any ideas?
Cheers.
G
September 25, 2014 at 2:14 pm #125712TonyaMemberHi G,
Yes, I'm still here and subscribing to this thread.
What you need to do is adjusting the padding top for each mobile device within your @media queries. I'll share a little developer's secret in how I do it:
http://responsive.nutsandboltsmedia.com
Go to this link. Then right click on each down arrow within each mobile device and select "Inspect Element". Then you can manually adjust the padding's top value to "move the arrow down". Once you like what you see, you need to add this code to your stylesheet for the media size. For example, the very first one in the link above is for width of 340px. Your code then would look like this:
@media only screen and (max-width: 320px) { .home-featured .home-widgets-1 { padding: 280px 0 60px; } }
Cheers,
Tonya
Software & Electrical Engineer and Programming Teacher 路 I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer BootcampSeptember 25, 2014 at 2:58 pm #125717tornadoParticipantThat's great, Tonya. Thanks!
However...given the number of devices it doesn't look good on and with so many more coming out, is there a way of just fixing this in one position for all? I guess it's not that easy...
September 25, 2014 at 3:05 pm #125720TonyaMemberBecause your header is fixed position, you need to adjust all the content down (via the padding) for each device. Now having said that, what I typically is start at the largest device, i.e. the iPad and then move down the list. What you'll find is that some device sizes can be combined, meaning the styles are relative to a grouping of sizes.
I know it's a lot of work. This is the fun that we developers deal with for each site.
Software & Electrical Engineer and Programming Teacher 路 I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer BootcampSeptember 25, 2014 at 3:12 pm #125721tornadoParticipantSure. Yes, all good fun! I really appreciate your time. Thank you!
G:)
September 25, 2014 at 3:13 pm #125722TonyaMemberYou're welcome 馃檪
Software & Electrical Engineer and Programming Teacher 路 I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer Bootcamp -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.