WordPress.org

Ready to get started?Download WordPress

Forums

Customizr
Change menu height (16 posts)

  1. hmd01810
    Member
    Posted 3 months ago #

    I would like to remove span 5 the social block and span 7 the site title so that I can make the height of the menu bar smaller. Where do I do it or is there another way to reduce the height of the menu bar.

  2. Maria Antonietta Perna
    Member
    Posted 3 months ago #

    Changing the span values would reduce the width of the menu bar, not its height. I think modifying the CSS on a child theme or a custom CSS plugin would be a better option. Could you post a link to your site?

  3. hmd01810
    Member
    Posted 3 months ago #

    I don't want to change the span values I want to get rid of them so the height of menu can be changed or collapse itself due to their absence.
    My site is charltoncityumc.org

  4. Maria Antonietta Perna
    Member
    Posted 3 months ago #

    Hi, I see what you mean. However, the span is needed as part of the grid system to keep the navbar to the right side and preserve the layout. You can change the height by modifying the height value on this CSS rule:

    .row-fluid [class*="span"] {
        -moz-box-sizing: border-box;
        display: block;
        float: left;
        margin-left: 2.5641%;
        min-height: 30px;
        width: 100%;
    }

    However, this would affect all rows. Therefore, I suggest you leave the rule above as it is and enter this new CSS rule instead, after the one above, which should overwrite the 30px height:

    .navbar-wrapper {
      height: 20px;
    }

    Or whatever height you want.

    One more problem that I see is the position of the menu items: they should be vertically aligned to the middle, but the CSS for this would depend on the height that you decide the menu bar should have.

    I hope it works.

  5. d4z_c0nf
    Member
    Posted 3 months ago #

    Don't know if I get your point.
    You want to hide social-blocks and site description in navbar?
    You can easily do that with css (or php if you want):
    CSS version:

    .navbar-inner .social-block {
    display: none;
    }
    .navbar-inner .site-description {
    display: none;
    }

    Was that?

  6. hmd01810
    Member
    Posted 3 months ago #

    I'm new to WordPress, my first site, but if I don't display them aren't they still there just not visible? I want to change the height but if there are items in the menu bar then they are taking room.

  7. hmd01810
    Member
    Posted 3 months ago #

    antonietta456 - When I changed the wrapper height it just moved the entire menu container down.

  8. Maria Antonietta Perna
    Member
    Posted 3 months ago #

    I don't understand: do you want to decrease the menu bar's height or get rid of site title and description? Or both?

  9. Maria Antonietta Perna
    Member
    Posted 3 months ago #

    I can see now that there are 2 elements inside the menu bar that are not visible on the page. Now I think I understand! I think that you can either put a display none on the elements (this would also eliminate the space the elements take), as already posted by d4z_c0nf above, or adjust the template for that page.

    For the second solution, you need to copy over the template file for that page into your child theme and simply delete both the social block div and the inside-site-description h2 element.

  10. d4z_c0nf
    Member
    Posted 3 months ago #

    sorry antonietta but that code is wrong for 2 reasons:
    1) will hide all social-block & inside-site-description classes.
    2) inside-site-description class doesn't exist.

  11. Maria Antonietta Perna
    Member
    Posted 3 months ago #

    Yeah, sorry, it's .site-description: copying and pasting from firebug is a bit cumbersome at times. If .social-block is repeated throughout the site, then being more specific, like you did in the previous post, is the right solution. Also, copying the template from the parent to the child and deleting the div and h2 could achieve the same result.

  12. d4z_c0nf
    Member
    Posted 3 months ago #

    Yeah it happens, just wanted to point it for hmd01810
    If he's new to wordpress, and I presume also to css and php, find the right file and those divs could be a little hard.
    hmd01810
    start from here: http://www.themesandco.com/customizr
    http://www.themesandco.com/customizr/how-to-customize-customizr-wordpress-theme/

  13. Maria Antonietta Perna
    Member
    Posted 3 months ago #

    It looks great, whatever hmd01810 is comfortable doing.

  14. hmd01810
    Member
    Posted 3 months ago #

    I think I will leave it for now. I feel fairly comfortable with CSS but am completely lost with php. I may place the church address in the site description box. I wanted the container shorter because I wanted to change the background color to black or dark green, but it would look too heavy if it is that fat.
    Thanks for your help and I think I will call this resolved.

  15. d4z_c0nf
    Member
    Posted 3 months ago #

    Oh I see, so but what's the problem with that css code I gave you?
    Doesn't work as expected?

  16. hmd01810
    Member
    Posted 3 months ago #

    I'm sorry d4z, I thought I had already turned them off with the code
    .span7, .span11 {display:none;}
    Tried your code and it did just what I want. Thank you so much.
    I would like to move the menu bar down now and I think I can do that with the the code Antonietta gave earlier which moved the menu bar down.
    .navbar-wrapper {
    height: 20px;
    }
    (or whatever number of pixels work)

Reply

You must log in to post.

About this Theme

About this Topic