Need help? Check out our Support site, then


Adventure Journal CSS - make menu stretch across page

  1. Hi, is there any way to make my menu stretch horizontally across the entire page, so it doesn't just stop in the middle, looks more finished? Or can I just input an image behind the menu and what size should I make it in order for it to go the entire width of the page. If I go that route, how can I make the menu text stretch/fill the width of the page? Thanks for your help.

    The blog I need help with is thesouthboy.com.

  2. You can adjust the left/right padding for the nav menu items (the 10px value), but keep in mind that this will need to be adjusted whenever you add or remove a top level menu item. Also, do not get too close to the left edge as different browsers render things differently, and in some browsers everything might look alright, but in others the menu might break and go to two lines.

    #menu a {
    padding: padding: 13px 10px;
    }
  3. To make the menu container full-width in your current custom setup, add this:

    #menu-wrap {
    	width: 920px;
    }

    An alternative way to space out the menu would be to use a percentage to set the width for the top level menu items like this:

    #menu-main-menu > li {
    	width: 14%;
    }

    The same caveat applies, if you change the number of items in the top menu, you will also have to adjust that percentage. Try out both options (the one from thesacredpath above) and see what works best for you.

  4. Oh, and you could put an image behind the menu if you'd like. In your current setup, it looks to me like a 920px width would work well.

    Currently, there's a repeating background image:

    #menu-wrap {
    	background: url(http://s2.wp.com/wp-content/themes/pub/adventure-journal/images/top-menu-background.png") 0 bottom repeat-x;
    	margin-left: 4px;
    	padding-bottom: 5px;
    	position: relative;
    }

    You could add this to your Appearance → Custom Design → CSS page to replace that tiled background image with one you create and upload to your media library:

    #menu-wrap {
    	background: url(YOUR_IMAGE_URL) 0 bottom no-repeat;
    }

    Change the url() value to an image link from your media library.

  5. voyageindesign
    Member

    Hi there,

    I am currently using adventure journal theme, and I wanted to know if it is possible to change the colour of the block area that holds all the posts and widgets (so not the background image).

    And also the colour of the post headings and widget text?I have managed to change the colour of the widget headings and the post themselves, but cannot seem to do the other ones.

    Many thanks!

  6. That background is made up of three images. A top image, the main repeating central image, and then the image that is used for the footer area. You would have to recreate those three images exactly, pixel for pixel, in the colors you wanted. Here are the three images.

    http://s2.wp.com/wp-content/themes/pub/adventure-journal/images/mp-sprite-content-bg.png
    http://s2.wp.com/wp-content/themes/pub/adventure-journal/images/header-top.png
    http://s2.wp.com/wp-content/themes/pub/adventure-journal/images/footer-background.jpg

Topic Closed

This topic has been closed to new replies.

About this Topic