Navigation Menu Color and Container Width

  • I’m a novice to WP, but I’m using an ElegantThemes temp, and I’ve received no response in their forum. I’m trying to do 2 things.

    1) I would like to change the color of the top navigation tabs and 2)change the width of the container on all pages…

    Any help is appreciated…

    Site

    style-Black.css

    /*------------------------------------------------*/
/*-----------------[BASIC STYLES]-----------------*/
/*------------------------------------------------*/

body { margin: 0px; padding: 0; color: #ffffff; background-color:#180b0b; background-image: url(images/bg.gif); background-repeat: repeat-x; font-family: Arial; font-size: 12px; line-height: 22px; }

a:link { text-decoration: none; color: #fff; }

a:visited { text-decoration: none; color: #fff; }

a:hover, a:active { color: #dbdbdb; }

h1 { margin: 0px 0px 10px 0px; font-weight: normal; font-size: 30px; }

h2 { margin: 0px 0px 10px 0px; font-weight: normal; font-size: 27px; }

h3 { margin: 0px 0px 10px 0px; font-weight: normal; font-size: 24px; }

blockquote { overflow: auto; padding: 0 10px; margin: 20px 30px; background: #222; border: 1px solid #333; }

p img { padding: 0; max-width: 100%; }
    /*------------------------------------------------*/
/*---------------[MAIN LAYOUT INFO]---------------*/
/*------------------------------------------------*/

#bgdiv { background-image: url(images/bg-2.gif); background-repeat: repeat-x; background-position: bottom; width: 100%; }

#logobg { background-image: url(images/logo-bg.gif); background-repeat: no-repeat; }

.headings { width: 194px; background-color: #222; display: block; height: 28px; font-weight: bold; color: #fff; padding-left: 20px; padding-top: 3px; clear: both; }

#wrapper2 { width: 950px; margin: auto; padding: 0px 0px 0px 0px; }

.post-wrapper { width: 606px; padding: 15px; }

.rule { clear: both; border-top: 1px solid #222222; width: 636px; margin: 15px 0px; float: left; }

#home-wrapper { width: 697px; margin-top: 15px; }

.home-left { width: 420px; border-right: 1px solid #4b001c; float: left; }

.home-post-wrap { width: 395px; border-bottom: 1px solid #222222; padding: 15px 25px 25px 0px; }

.home-post-wrap-2 { width: 636px; border-bottom: 1px solid #222222; padding: 15px 0px; }

.home-post-wrap-3 { width: 636px; border-bottom: 1px solid #222222; padding: 0px; }

.home-right { width: 214px; float: left; }

.readmore { background-image: url(images/readmore-bg.png); padding: 5px 10px; color: #4b001c; font-size: 10px; margin: 23px 0px 0px 40px; display: block; float: right; }

.readmore a:link, .readmore a:hover { color: #fff; font-size: 10px; }

.titles a:link, .titles a:visited, .titles a:active { text-decoration: none; font-size: 20px; font-family: Georgia; margin-top: 10px; color: #6a909f; float: left; margin-bottom: 15px; clear: both; }

.post-title { margin: 15px 0px 20px 0px; }

.post-title2 { margin: 0px 0px 20px 0px; }

#header { width: 950px; margin-top: 0px; height: 219px; background-color: #373434; background-image: url(images/header-bg.gif); background-repeat: repeat-x; float: left; }

#container { float: left; width: 950px; background-color: #a18a8a; }

#container2 { float: left; width: 950px; margin-top: 15px; background-color: #ad9898; padding-top: 15px; }

#left-div { width: 678px; float: left; }

#left-div2 { width: 663px; float: left; padding: 0px 0px 15px 15px; }

#left-inside { float: left; padding: 0px 0px 0px 19px; }

.adwrap { margin-left: -5px; float: left; width: 270px; }

.adwrap a, .adwrap a:hover, .adwrap a:visited { margin-right: 5px; margin-bottom: 5px; display: block; float: left; }

#about-image { float: left; display: inline; margin-right: 10px; border: 5px solid #261414; }

.post-info { color: #56adff; font-size: 12px; background-color: #313131; float: left; border: 1px solid #3d3d3d; padding: 4px 10px; clear: both; height: 22px; }

.post-info2 { height: 22px; float: left; border-right: 1px solid #3d3d3d; border-top: 1px solid #3d3d3d; border-bottom: 1px solid #3d3d3d; background-image: url(images/ratings-bg.gif); color: #fff; padding: 4px 10px; }

.post-info a:link, .post-info a:visited { color: 	#fff; }

.logo { border: none; float: left; }

#animate a { background:url(images/pages-bg.gif) repeat -80px 35px; }

.current-category { background-color: #313131; color: #fff; border: 1px solid #424242; padding: 5px 10px; display: block; margin-bottom: 10px; width: 626px; }

.ad_468 { position: absolute; left: 403px; top: 20px; }
    /*------------------------------------------------*/
/*------------------[NAVIGATION]------------------*/
/*------------------------------------------------*/

.logowrap { float: left; width: 950px; margin-top: 80px; }

.logowrap ul { float: left; margin: 26px 0px 0px 40px; padding: 0px; }

.logowrap ul li { float: left; display: block; margin-right: 10px; }

.logowrap ul li a:link, .logowrap ul li a:visited { padding: 5px 10px; color: #fff; background-color: #404040; border: 1px solid #4c4c4c; display: block; }

.logowrap ul li a:hover { color: #000; }

		/*------------------[DROPDOWN MENU]------------------*/
		.nav ul { position:absolute; top:-999em; }

		.nav li { float:left; position:relative; z-index:9; }

		.nav ul li { width: 100%; }

		.nav li:hover ul, ul.nav li.sfHover ul { left:-40px; top:7px; }

		.nav li:hover li ul, .nav li.sfHover li ul { top:-999em; }

		.nav li li:hover ul, ul.nav li li.sfHover ul { left:161px; top:-26px; }

		.nav li:hover ul, .nav li li:hover ul { top: -999em; }

		.nav li li { padding: 0px; }

		.nav li:hover { }

		.nav li li a:link, .nav li li a:visited { width: 180px; display: block; background-image: url(images/pages-bg-2.gif) !important; background-position: 400px 0px; }

		.nav li li a:hover { }
    /*------------------------------------------------*/
/*-----------------[WP PAGE NAVI]-----------------*/
/*------------------------------------------------*/
.wp-pagenavi { margin-bottom: 15px; }

.wp-pagenavi a, .wp-pagenavi a:link { padding: 5px 7px; margin: 2px; text-decoration: none; border: 1px solid #424242; color: #FFF; background-color: #4b001c; }

.wp-pagenavi a:visited { padding: 5px 7px; margin: 2px; text-decoration: none; border: 1px solid #424242; color: #FFF; background-color: #313131; }

.wp-pagenavi a:hover { border: 1px solid #fff; color: #000; background-color: #c9c9c9; }

.wp-pagenavi a:active { padding: 5px 7px; margin: 2px; text-decoration: none; border: 1px solid #424242; color: #FFF; background-color: #4b001c; }

.wp-pagenavi span.pages { padding: 5px 7px; margin: 2px 2px 2px 2px; color: #000000; border: 1px solid #424242; color: #FFF; background-color: #4b001c; }

.wp-pagenavi span.current { padding: 5px 7px; margin: 2px; font-weight: bold; border: 1px solid #fff; color: #000; background-color: #c9c9c9; }

.wp-pagenavi span.extend { padding: 5px 7px; margin: 2px; border: 1px solid #fff; color: #000; background-color: #c9c9c9; }
Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter me4u2nv

    (@me4u2nv)

    Is there anyone here that can help me with this? Thanks

    I also have a menu issue where I would like to make my top menu wider to accomomdate more page links. The way it stands now, the page links are wrapping around and don’t show up well due to the color of the background

    link to your site?

    Hey i’m new to this as well but I had the same problem but with a different theme. I solved it by adding
    color #000000;
    to all the different things inside of the naviagtion/WP page navi sections.

    so change this:
    .logowrap { float: left; width: 950px; margin-top: 80px; }
    to
    .logowrap { float: left; width: 950px; margin-top: 80px; color #000000; }
    Then see what happens. Eventually you should hit the right spot. Try the WP Page Navi section first, that where i found mine.

    It is also helpfull to add in comments when you discover what anything does. Use
    */ coments in here */
    right before the second }.

    *note that #000000 if black and therfore will not change black things black. If you don’t know anyhting about hex internet colors I suggest this site: https://www.w3schools.com/html/html_colors.asp

    If you go through them all and there arn’t any changes then youl have to ask someone smarter.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Navigation Menu Color and Container Width’ is closed to new replies.