Viewing 19 posts - 1 through 19 (of 19 total)
  • Author
    Posts
  • June 25, 2014 at 12:45 am #283337
    ewingmh

    http://www.crestedbuttecomputers.com/dev/cbfpd

    Is there a way to make the Menu items word wrap so that Fire Division are on two separate lines. I added a <br> tag and it is causing weird spacing issues that I can’t seem to find the CSS for.

    • This topic was modified 10 years, 4 months ago by ewingmh.
    June 25, 2014 at 4:04 am #283385
    Ismael

    Hey ewingmh!

    Thank you for using the theme!

    You can wrapped the second word on the menu title around a span tag. Something like this:

    Fire<span class="menu-break">Division</span>

    Add this on Quick CSS or custom.css:

    span.menu-break {
display: block;
line-height: 0;
bottom: 35px;
position: relative;
}

    Best regards,
    Ismael

    June 25, 2014 at 7:00 am #283423
    ewingmh

    Great – any way to center the two rows so that Fire and Division are aligned center both vertically and horizontally?
    In responsive mode it does all kinds of weird stuff – Division ends up on top of Fire.

    • This reply was modified 10 years, 4 months ago by ewingmh.
    June 25, 2014 at 2:41 pm #283608
    Günter

    Hi!

    You can try the following:
    Add this on Quick CSS or custom.css:

    
.menu-item-top-level{
	text-align: center;
}

    This will center all top menu items.

    If you only want to center a specific item, you have to find out the id of this menu and can use the following code (2971 must be replaced with the ID of your menu ID) :

    
#menu-item-2971 {
	text-align: center;
}

    Regards,
    Günter

    June 25, 2014 at 5:45 pm #283686
    ewingmh

    You guys are great. Any chance to center the menu items vertically in the header? The menu does not work in responsive mode – Division ends up on top of Fire. –

    UPDATE – I added this and it seems to work for responsive mode:
    @media only screen and (min-width: 320px) and (max-width: 480px) {
    span.menu-break {
    position: inherit !important;
    }
    }
    @media only screen
    and (min-device-width : 768px)
    and (max-device-width : 1024px) {
    span.menu-break {
    position: inherit !important;
    }
    }

    Still looking to center the menu vertically within the header.

    • This reply was modified 10 years, 4 months ago by ewingmh.
    June 26, 2014 at 5:24 am #283897
    Ismael

    Hey!

    Thank you for the update.

    Use this to center the menu vertically:

    .av-main-nav-wrap {
margin-top: -15px;
}

    Cheers!
    Ismael

    June 27, 2014 at 2:01 am #284358
    ewingmh

    that also moves the white bar indicating the active link.

    June 27, 2014 at 4:43 am #284390
    Ismael

    Hi!

    Alright. Sorry about that. You can use this instead:

    .avia-menu-fx {
bottom: -21px;
}

div.avia-menu.av-main-nav-wrap {
margin-top: -20px;
}

.av-main-nav ul {
margin-top: 20px;
}

    Best regards,
    Ismael

    October 10, 2014 at 3:38 pm #333878
    aconnors

    I am using the suggestions above, and they seem to work except for my wide screen laptop.

    So I am using
    @media only screen{
    position: inherit !important;
    }
    }

    which seems to fix the problem. I’m not great with this kind of code–is this going to cause some other problem by not limiting the device widths?

    Also, my menu is now not tall enough for the second line. Check it out at
    kirkofkildaire.org

    October 10, 2014 at 3:59 pm #333894
    Yigit

    Hi!

    You can simply use the code as following to apply it on all screens

    span.menu-break {
position: inherit !important;
}

    Regards,
    Yigit

    October 10, 2014 at 4:19 pm #333910
    aconnors

    I figured out the menu height from another post using

    .main_menu ul:first-child > li a {
    height: 37px !important;
    line-height: 20px !important;
    }

    But would still appreciate whether using the @media only screen without limiting the device widths will cause a problem.

    October 10, 2014 at 4:26 pm #333914
    Yigit

    Hey!

    I checked your website and it does not. Please add following code to Quick CSS to decrease the padding between menu items when screen width is smaller than 1040px

    @media only screen and (max-width: 1040px) {
.av-main-nav > li > a { padding: 0 12px; }}

    Cheers!
    Yigit

    October 10, 2014 at 4:36 pm #333923
    aconnors

    Thanks!

    October 10, 2014 at 4:39 pm #333926
    Yigit

    Hey!

    You are welcome, we will keep the thread open for the OP. Feel free to start a new thread if you have any other questions or issues

    Cheers!
    Yigit

    October 11, 2014 at 12:06 am #334117
    ezequielmoura

    Hi, you know why this happens?

    Menu

    October 11, 2014 at 11:23 am #334280
    Arvish

    Hi @ezequielmoura

    It could be a CSS issue. Could you please the link to your site so we could have a look.

    Cheers!
    Arvish

    October 11, 2014 at 10:31 pm #334406
    aconnors

    Just realized that the changes I made to support breaks in the main menu probably require some changes to my submenu (not sure that’s the right term, but the sub items that appear when you rollover the main menu items.) The spacing is off. If you look at the items under Worship, which is the only place it appears, you will see what I mean. Worship is the only area that has wrap around sub items, so I think it’s related to that. Any suggestions?

    kirkofkildaire.org

    October 11, 2014 at 10:38 pm #334408
    ezequielmoura
    This reply has been marked as private.
    October 11, 2014 at 11:22 pm #334409
    aconnors

    I fixed it using the same menu break class–hadn’t thought of it.

  • Author
    Posts
Viewing 19 posts - 1 through 19 (of 19 total)
  • The topic ‘Word Wrap in Menu – or Have the menu on two lines’ is closed to new replies.