Community Forums › Forums › Archived Forums › Design Tips and Tricks › Crystal Navigation Shifting
- This topic has 12 replies, 4 voices, and was last updated 11 years, 1 month ago by seminolecrew.
-
AuthorPosts
-
December 4, 2012 at 1:53 am #3234seminolecrewMember
Hello, my site is...
http://www.cpluscreative.com/wordpress
If you notice, as I just started working on my navigation, it is shifting from the top. Can you let me know what I need to change to fix this? Thanks so much.
Corey
December 4, 2012 at 9:37 pm #3387seminolecrewMemberAny help would be appreciated...
January 22, 2013 at 4:50 pm #13887seminolecrewMemberDoes anyone even offer help or assistance anymore? Seems like I am going to have to switch to a whole new template because I cant get anything answered.
January 22, 2013 at 5:13 pm #13900SusanModeratorPart of the reason why your post may not have been responded to is that you replied to it, thereby not being "searchable" when people are looking for unanswered posts to respond to - there is a way to easily search for "unanswered posts".
In looking at your site (in Chrome), I'm not sure what you are asking, or what you are seeing that is wrong. I'm seeing a large box which is covering part of your site title - is that what you are referring to? I'll be happy to take a look if I knew what it is you need help with.
Did you want your navigation to be in the Header Right as shown on the demo? If so, follow the instructions for setting up the menu:
Setting up the Menu
In this theme, disable the Primary and Secondary Navigation under Genesis Settings -> Navigation.
Created a menu under Appearance -> Menus.
Note that drop-down menu items are created by placing those menu item indented over to the right.
Now visit Appearance -> Widgets, and drag the Custom Menu widget to Header Right. Choose the menu you just created.
February 25, 2013 at 1:59 pm #22752seminolecrewMemberThank you for answering Susan, and your comment is noted about submitting something one time until someone answers. Appreciate your help. I did what you had recommended, and the navigation is still not laying out the same way the demo looks. Apparently something is off.
http://www.cpluscreative.com/wordpress
Any help would be appreciated.
February 25, 2013 at 3:09 pm #22759KraftMemberIt looks like the width of your header is too big. It's at 400px now, knocking it down to 350px knocks the menu back up (the demo width is at 320px).
Brandon Kraft
Volunteer
Blog | Twitter
Genesis eNews Extended SupportFebruary 25, 2013 at 3:10 pm #22760KraftMemberShould clarify - the width of your title-area per the style rule in the html of your site itself (.header-image #header #title-area { width: 400px.....)
Brandon Kraft
Volunteer
Blog | Twitter
Genesis eNews Extended SupportFebruary 25, 2013 at 3:34 pm #22762seminolecrewMemberI'm not seeing anywhere in the style where it is listed at 400 px. Am I missing something?
/***** Header ********************/
#header {
width: 960px;
height: 120px;
}#title-area {
width: 350px;
float: left;
padding: 20px 0 0 0;
overflow: hidden;
}#title-area #title {
font-size: 24px;
font-weight: normal;
line-height: 30px;
margin: 0;
padding: 0;
}#title-area #title a, #title-area #title a:hover {
color: #333333;
text-decoration: none;
}#title-area #description {
font-size: 12px;
font-style: italic;
font-weight: normal;
margin: 0;
}#header .widget-area {
width: 600px;
float: right;
padding: 30px 0 0 0;
}#header .widget-area p {
margin: 0;
padding: 0 0 5px 0;
}/***** Image Header - Partial Width ********************/
.header-image #header #title-area {
background: url(images/logo.png) center top no-repeat;
}.header-image #title-area, .header-image #title-area #title, .header-image #title-area #title a {
display: block;
float: left;
width: 320px;
height: 120px;
padding: 0;
text-indent: -9999px;
overflow: hidden;
}.header-image #title-area #description {
display: block;
overflow: hidden;
}February 25, 2013 at 3:47 pm #22766SusanModeratorYour header width is set to 960px.
Your #header.widget-area and title area with their accompanying padding is pushing the width to over 960px.
Try adjusting your #header.widget-area down by 30px.
(Thanks to @bradleypotter on Twitter for pointing this out to me!)
Edited to clarify...
February 25, 2013 at 3:55 pm #22768KraftMemberCheck out the HTML source code. There is a single style rule after the title and before the meta. I'm not exactly sure where that is coming from—perhaps the Genesis->Theme Settings->Header Scripts?
Perhaps a plugin or something in functions.php too. In either case, just tweaking that bit of CSS does it.
Edited to include the following:
Here's a screenshot of everything:
http://picpaste.com/pics/hardcoded-css-PtM7iOr4.1361829536.png
On the far left, you can see the 400px in the source code, in the inspector window next to it, I've changed it to 360px (361 and larger causes the issue). The right side shows the website with 360px title-area.
Brandon Kraft
Volunteer
Blog | Twitter
Genesis eNews Extended SupportFebruary 25, 2013 at 4:13 pm #22770seminolecrewMemberI messed with the widget area dimensions. That seemed to snug it up. Thanks.
February 25, 2013 at 4:25 pm #22773BradMemberI was incorrect about the padding adding to the problem but yes changing the widget area dimensions fixes it. I further inspected your source code and noticed this:
<title>Blog — Just another WordPress site</title>
<style type="text/css">
.header-image #header #title-area {
width: 400px;
height: 120px;
background: url(http://cpluscreative.com/wordpress/wp-content/uploads/2012/10/logocopy.png) no-repeat!important;
}
</style>So with that logo image being 400px wide you have to make sure the remaining width allotted for the header widget area doesn't exceed 560px
The logo has a lot of extra space to the right of it so you could crop it to free up more width for the header widget area and adjust the CSS accordingly.
February 25, 2013 at 4:28 pm #22774seminolecrewMemberThank you!
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.