Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • April 10, 2016 at 1:21 am #610708
    FayeMcC

    Hi

    I would like to place a logo in the middle of the main menu – how can I do this?

    Is there some CCS I can paste?

    Many thanks

    Faye

    April 10, 2016 at 1:38 am #610711
    Josue

    Hi!

    Refer to:
    https://kriesi.at/support/topic/center-logo-in-navgation-and-hover-the-pics-like-in-eunoia-2/#post-416140

    Cheers!
    Josue

    April 10, 2016 at 2:29 am #610715
    FayeMcC

    Hi Josue

    Thank you.

    I just pasted below – logo doesn’t appear??? Also seems to insert a large space between main heading and sub headings in pull down. What am i doing wrong?

    @media only screen and (min-width: 767px) {
    #header_main > .container {
    display: none;
    }
    }

    .html_header_top.html_bottom_nav_header .main_menu>div, .html_header_top.html_bottom_nav_header .main_menu ul:first-child, .html_header_top .av_bottom_nav_header .main_menu ul:first-child > li a {
    height: 200px;
    line-height: 100px;
    }

    .html_header_top.html_header_sticky.html_bottom_nav_header #main {
    padding-top: 100px;
    }

    April 10, 2016 at 12:04 pm #610767
    FayeMcC

    I have found this code

    ul#avia-menu { position: relative; top: -120px; }
    #header_main_alternate { z-index: 4; }
    li#menu-item-117 .avia-menu-text, li#menu-item-117 .avia-menu-fx { opacity: 0; }
    ul#avia-menu {
    left: 27px;
    }

    This places the menu bar exactly where I want it. However i now need to split the menu bar so that the middle menu items don’t cover the logo. How would I do this?

    April 11, 2016 at 5:00 am #610934
    Rikard

    Hi,

    I’m not sure if I’ve missed something in the thread but it looks like you achieved what you were looking to do? If not then please try to explain a bit further and we’ll have a closer look.

    Best regards,
    Rikard

    April 11, 2016 at 10:25 am #611094
    FayeMcC

    Hi Rikard

    I have managed to achieve the split main menu – however the menu can’t be read on a mobile.

    This is the code i used

    li#menu-item-2286 {
    left: -160px;
    }
    li#menu-item-573 {
    left: -160px;
    }
    li#menu-item-574 {
    left: -160px;
    }
    li#menu-item-572 {
    right: -90px;
    }
    li#menu-item-1175 {
    right: -90px;
    }
    li#menu-item-1214 {
    right: -90px;
    }

    How do i fix the menu when viewing with mobile?

    Many thanks

    Faye

    April 11, 2016 at 11:09 am #611118
    Josue

    Hi!

    Wrap your code with this:

    @media only screen and (min-width: 767px) {

}

    That way it will only run on desktop.

    Cheers!
    Josue

    April 11, 2016 at 11:32 am #611127
    FayeMcC

    Hi Josue

    I have tried that but it doesn’t seem to work?

    Also when I view on a tablet (iPad and google), the main menu is running over the logo – it hasn’t split as per the view on desktop. I have tried in responsive and non responsive mode and it still looks the same???

    Below is the complete CSS I am now using – without the new @media only screen…. code

    I thought it might be best to check that this was right, before doing anything else.

    Many thanks for your help

    Faye

    ul#avia-menu { position: relative; top: -120px; }
    #header_main_alternate { z-index: 4; }
    li#menu-item-117 .avia-menu-text, li#menu-item-117 .avia-menu-fx { opacity: 0; }
    ul#avia-menu {
    left: 27px;
    }
    li#menu-item-2286 {
    left: -160px;
    }
    li#menu-item-573 {
    left: -160px;
    }
    li#menu-item-574 {
    left: -160px;
    }
    li#menu-item-572 {
    right: -90px;
    }
    li#menu-item-1175 {
    right: -90px;
    }
    li#menu-item-1214 {
    right: -90px;
    }

    April 11, 2016 at 11:41 am #611130
    FayeMcC

    Okay I seem to have resolved the iPad/tablet issue.

    Please can you still help me with the mobile menu issue?

    Should I put @media only screen and (min-width: 767px) {

    }

    above the whole menu element…so above
    ul#avia-menu { position: relative; top: -120px; }
    #header_main_alternate { z-index: 4; }
    li#menu-item-117 .avia-menu-text, li#menu-item-117 .avia-menu-fx { opacity: 0; }
    ul#avia-menu {
    left: 27px;
    }

    or do i need to place it after this…before the different menu bits?

    April 11, 2016 at 12:20 pm #611173
    Josue

    Should be like:

    @media only screen and (min-width: 767px) {
/* YOUR CUSTOM CODE HERE */
}
  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.