extend menu background to 100%

open (7 posts) (2 voices)

  1. essentialsoflife
    Member

    Currently, the menu is set at 960px. I'd like the menu itself to stay at 960px to match the page, but have the background to extend to 100% to match the footer.

    My site is http://essentialsoflife.net/gallery/

    Thank you!

    Posted 2 years ago #
  2. essentialsoflife
    Member

    I'd like to change the site to http://essentialsoflife.net/blog/

    Posted 2 years ago #
  3. omg
    Member

    You should be able to chose your background in your "Skins" section, under "Background" then you can chose if you want to repeat that background if the image doesn't cover the entire area. If you want custom background on all/certain pages you can go into each page and scroll down to "General Page Options" and then under "Custom Backgrounds" and upload/chose a separate background for that page

    Posted 2 years ago #
  4. essentialsoflife
    Member

    This is my primary menu...

    #primary_menu{background-image:url(../images/menu_bg.png);background-color:transparent;background-repeat:repeat-x;background-attachment:scroll;background-position:left top;}

    When I change the background color, nothing happens.

    Posted 2 years ago #
  5. omg
    Member

    To understand you want the purple in the main menu to extend the width of your website?

    I am not 100% sure, but you can try the following CSS, just add it to your Custom CSS area:

    .is_home #primary_menu {width: 100% !important; }

    or try

    #primary_menu {width: 100% !important; }

    then to center the actual menu items you can try the following CSS:

    .jqueryslidemenu ul { position: relative; left: 200px; }

    change the 200px until you have it centered. Also FYI you should check different browsers to make sure they all look correct, sometimes Firefox and Chrome will look different than Safari.

    Good Luck!

    Also just a heads up to get any other elements to 100% width you can try any of this code below and add to your custom CSS area to make full width, you can remove certain sections to keep some areas from being full width. For a full width slideshow use the plugin Slider Revolution for $19 is awesome.

    .is_home #content { height: 1500px !important; }

    .is_home #primary_menu {width: 100% !important; }

    #body_inner, #content_wrap, #header, #footer {
    width: 100% !important; }

    #main {width: 100% !important; }

    #content {width: 100% !important; }

    #content_inner { padding-bottom: 0px !important; }

    .is_home #content, #content_wrap {width: 100% !important; }

    .is_home#content_inner { width: 0px !important; }
    .is_home#content_inner { height: 0px !important; }

    #body {width: 100% !important; }

    #main_body { width: 100% !important; }

    #intro_inner { width: 100% !important; }

    Posted 2 years ago #
  6. essentialsoflife
    Member

    Thank you so much!

    I have it fixed now, I think, though a little complicated. I added the following css, plus using the UberMenu plugin to center the menu in the 960 to match the body. Oh, and I needed to add a custom div in the header to center my logo pic.

    #primary_menu, #header_extras_inner{width: 100% !important;background: transparent -moz-linear-gradient(center top , #C5C1E1, #958FC8) repeat scroll 0% 0%;
    }
    #header{height:188px;z-index: 5000;}
    #header_inner{width:100% !important;}
    #header_extras{margin-top: 0px;width:100%;}
    .logo{display:none !Important;}
    #custom_logo{top:5px;position:relative;display: block;
    margin-left: auto;
    margin-right: auto; width:960px;}

    Posted 2 years ago #
  7. omg
    Member

    Awesome, great job!!!

    Posted 2 years ago #

Reply

You must log in to post.

Construct WordPress Theme
Construct wordpress theme
Myriad WordPress Theme
Myriad wordpress theme
Method WordPress Theme
Method wordpress theme
Fusion WordPress Theme
Fusion wordpress theme
Elegance WordPress Theme
Elegance wordpress theme
Echelon WordPress Theme
Echelon wordpress theme
Dejavu WordPress Theme
Dejavu wordpress theme
Modular WordPress Theme
Modular wordpress theme