WordPress.org

Forums

[closed] godaddy cleanio theme adjust spacing in header and nav bar (6 posts)

  1. astephens
    Member
    Posted 9 months ago #

    godaddy cleanio theme:
    Just started setting up a website and would like to tighten up the space below the blog title. I omitted the "Description" wording which helped but the nav bar is taller than i'd like and maybe there's a way to omit the separating lines between buttons? Also can't find the place to change the ORANGE color to something more suitable.
    Thanks very much!
    http://www.alvinhealingrooms.org
    Ann

  2. If you look at the header CSS, there are margins above and below your title:

    header#cc-header {
    margin-top: 35px;
    margin-bottom: 30px;
    }

    Changing these would make that area less big.
    The CSS for the navigation bar is here:

    element.style {
    }
    alvinhealingrooms.org/media="all"
    .navbar .nav > .active > a, .navbar .nav > .active > a:hover, .navbar .nav > .active > a:focus, .navbar .current-menu-ancestor.dropdown, .navbar .nav > li.current_page_item > a, .navbar .nav li.dropdown.open > .dropdown-toggle, .navbar .nav li.dropdown.active > .dropdown-toggle, .navbar .nav li.dropdown.open.active > .dropdown-toggle {
    color: #ffffff;
    background-color: #f37d35;
    }
    alvinhealingrooms.org/media="all"
    .navbar .nav > .active > a, .navbar .nav > .active > a:hover, .navbar .nav > .active > a:focus, .navbar .current-menu-ancestor.dropdown, .navbar .nav > li.current_page_item > a, .navbar .nav li.dropdown.open > .dropdown-toggle, .navbar .nav li.dropdown.active > .dropdown-toggle, .navbar .nav li.dropdown.open.active > .dropdown-toggle {
    color: #4a9eb6;
    text-decoration: none;
    background-color: #daf0f7;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    }
    alvinhealingrooms.org/media="all"
    .navbar .nav > .active > a, .navbar .nav > .active > a:hover, .navbar .nav > .active > a:focus, .navbar .current-menu-ancestor.dropdown, .navbar .nav > li.current_page_item > a, .navbar .nav li.dropdown.open > .dropdown-toggle, .navbar .nav li.dropdown.active > .dropdown-toggle, .navbar .nav li.dropdown.open.active > .dropdown-toggle {
    color: #ffffff;
    background-color: #f37d35;
    }
    alvinhealingrooms.org/media="all"
    .navbar .nav > .active > a, .navbar .nav > .active > a:hover, .navbar .nav > .active > a:focus, .navbar .current-menu-ancestor.dropdown, .navbar .nav > li.current_page_item > a, .navbar .nav li.dropdown.open > .dropdown-toggle, .navbar .nav li.dropdown.active > .dropdown-toggle, .navbar .nav li.dropdown.open.active > .dropdown-toggle {
    color: #4a9eb6;
    text-decoration: none;
    background-color: #daf0f7;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    }
    alvinhealingrooms.org/media="all"
    .navbar .nav>.active>a, .navbar .nav>.active>a:hover, .navbar .nav>.active>a:focus {
    color: #555;
    text-decoration: none;
    background-color: #e5e5e5;
    -webkit-box-shadow: inset 0 3px 8px rgba(0,0,0,0.125);
    -moz-box-shadow: inset 0 3px 8px rgba(0,0,0,0.125);
    box-shadow: inset 0 3px 8px rgba(0,0,0,0.125);
    }
    
    .main-navigation .nav > li > a {
    padding: 15px 20px 15px;
    color: #909090;
    text-shadow: none;
    border-right: 1px solid #d8d8d8;
    }

    you can change the padding and remove the border-right.

    And the background colour is:

    .navbar .nav > .active > a,
    .navbar .nav > .active > a:hover,
    .navbar .nav > .active > a:focus,
    .navbar .current-menu-ancestor.dropdown,
    .navbar .nav > li.current_page_item > a,
    .navbar .nav li.dropdown.open > .dropdown-toggle,
    .navbar .nav li.dropdown.active > .dropdown-toggle,
    .navbar .nav li.dropdown.open.active > .dropdown-toggle {
      color: #ffffff;
      background-color: #f37d35;
    }

    Don't forget that if you want to make these changes you will need to do is make a child theme - Codex: Child theme

    or use a CSS plugin such as this one http://wordpress.org/plugins/simple-custom-css/ or jetpack.

  3. astephens
    Member
    Posted 9 months ago #

    Thank you so much for helping me, Christine. I did enable the css editing so i could get into it and override the theme. Also i installed the plugin you suggested but haven't used it yet. I've been trying to find that orange color #f37d35 in the style.css editor but so far not locating it. Now somehow i've lost my horizontal navigation bar - it's gone vertical and hiding. Not sure what i did because i was trying to be cautious not to change anything permanently. Maybe we could start with that... recovering my horizontal nav bar? Thanks for your help and patience...
    Ann

  4. astephens
    Member
    Posted 9 months ago #

    ok... i have the horizontal menu back but the header image now only shows on the home page... trying to get it to appear again on all pages like it was before.

  5. mhensen
    Member
    Posted 2 months ago #

    I know this thread is a little old, but I am using the same theme right now. I just have one question, and cyber chimps don't want to support unless you pay the $10 a month or full year sub. Anyway, I have a header issue.

    so the above margins were set to 0, to clear the top and bottom like this:

    header#cc-header {
    margin-top: 0px;
    margin-bottom: 0px;
    }

    I have customized the header css, and logo to adapt in a nice header box of the full page width at 1020X200. However, my header is displaying only 940 px of itself in the header box. There was a left margin, but I found in another cleanio post that when you apply a margin-left: -40px; - this allows you to move the header to the full
    left side of the page. However, now the margin gap on the right side of the page is cutting off my header graphic, which needs to be opened to full width. I don't want to change the page #wrapper which is set to 1020X1400.

    Here is what my css modification currently looks like, but I am missing just a little piece to display this nice header in full width.

    header#cc-header {
    margin-left: -40px;
    margin-top: 0;
    margin-bottom: 0px;
    padding: 0px;
    background: url(/wp-content/uploads/2015/02/* the title of your header image goes here */) no-repeat;
    }

    The site I am working on is:
    http://achievablegreatness.outputva.com/

    Any help would be greatly appreciated. In turn, I'd be happy to create you a custom graphic for your page free for the help.
    Thanks!
    -Mike

  6. Andrew
    Forum moderator
    Posted 2 months ago #

    You should still create your own thread https://wordpress.org/support/forum/themes-and-templates#postform

    When you do, try to avoid giving people rewards other than 'thank you's :)

Topic Closed

This topic has been closed to new replies.

About this Topic