Navigation Bar Help on Custom Theme

  • I’m creating a custom theme for a client. This is my first time using wordpress, and my first custom theme.
    I have enabled the ‘menus’ option for custom menu created through the admin panel.
    I have also styled the menu to the needs of the site.
    However, the problem I’m having is that the menu does not move with the page wrap and its contents when the browser window is stretched, expanded, or shrunk. (www.portwashingtonmama.com)
    I’ve tried searching for a solution but can’t seem to find anything.

Viewing 5 replies - 1 through 5 (of 5 total)

  • It looks like your #page-wrap CSS declaration might be set incorrectly. 

    #page-wrap {
	width: 100%;
	align:center;
	margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    min-height: 100%;
    position: relative;
}

    Essentially, the ‘align:center;’ declaration is unnecessary since you’re using the auto margins on the left and right, but you’ve set the width for the element to 100%, which means it will still take up the whole width of the page. To get it to match up with the header, try setting it to the width of the header image: 1003px.

    If you have any more questions, look me up at [contact details moderated]

    Thread Starter EvolveDesigns

    (@evolvedesigns)

    my header works fine with the page wrap. its the menu that doesn’t react with the rest of the page. I want it to stay centered with all the content and move with it.

    Yes, the header works because it has its own centering declaration. The #page-wrap declaration is what won’t center though because it’s being told to take up the entire width of the browser window, so it’s making the navigation, content and footer all align to the left of the page because there’s no space left to cushion it into the center.

    If you change your page wrap to the following code, the rest of the page should center itself below the header. 

    #page-wrap {
	width: 1003px;
	align:center;
	margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    min-height: 100%;
    position: relative;
}
    Thread Starter EvolveDesigns

    (@evolvedesigns)

    ohhh. I’m sorry, I misunderstood you. I thought that you were telling me to define the width of the header as 1003px.
    Thank you very much! That fixed it. I knew it was me just making stupid mistakes.
    Thank you! ??

    No problem, glad I could help!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Navigation Bar Help on Custom Theme’ is closed to new replies.