Viewing 20 posts - 1 through 20 (of 20 total)
  • Author
    Posts
  • May 29, 2015 at 3:13 pm #451628
    simonac

    Hi,
    i want to move the top menu with the social icon and the extra text down, so it is in one line with the logo.
    Also the grey line/border under the top menu should be removed.

    View post on imgur.com

    How can i do this?

    The second thing is, i use different full width sub menus. How to make the current active menu piont bold and have another color?

    The last thing is: How to center the main menu?

    Thanks, Simon

    May 31, 2015 at 7:46 am #452195
    Ismael

    Hi simonac!

    Thank you for using Enfold.

    1.) Use this:

    @media only screen and (min-width: 989px) {
   div#header_meta {
  position: absolute;
  border: 0;
  top: 20%;
  }

div#header_main {
  border-top: 0;
}}

    2.) Use this:

    #top .av-subnav-menu > li.current_page_item a {
  color: red;
}

    3.) Try this:

    .avia-menu.av-main-nav-wrap {
text-align: center;
}

ul#avia-menu {
  float: none;
  display: inline-block;
}

    Regards,
    Ismael

    June 1, 2015 at 9:55 am #452413
    simonac

    Hi Ismael,

    1.) It works – except for there is space added below the main menu now. How to remove the blue extra space?

    2.) worked like a charm.

    3.) worked like a charm.

    Thanks Simon

    • This reply was modified 9 years, 6 months ago by simonac.
    June 1, 2015 at 5:11 pm #452644
    Yigit

    Hi!

    Please add following code to Quick CSS as well

    .html_header_top.html_header_sticky #top #wrap_all #main {
  padding-top: 160px;
}

    Best regards,
    Yigit

    June 1, 2015 at 7:07 pm #452712
    simonac

    Hi Yigit,

    that code did not change anything.

    Regards, Simon

    June 1, 2015 at 7:15 pm #452715
    Yigit

    Hey!

    Please try adding !important rule to the code as following 

    .html_header_top.html_header_sticky #top #wrap_all #main {
  padding-top: 160px !important;
}

    Cheers!
    Yigit

    June 1, 2015 at 7:24 pm #452718
    simonac

    That did the trick! :)

    …there’s only a small white border/line left under the menu. How to remove this?

    Thanks a lot!

    June 1, 2015 at 8:11 pm #452730
    Yigit

    Hi!

    Please add following code to Quick CSS as well

    .avia-menu-fx { display: none !important; }

    Regards,
    Yigit

    June 2, 2015 at 9:24 am #453003
    simonac

    Hi,

    that didn’t work…

    Also on mobile devices the blue menu area is getting huge.

    View post on imgur.com

    And is there a way to prevent the menu to flip in the second row on a touchpad?

    View post on imgur.com

    And you see, that the layerslider is not full width on mobile devices. How to make that?

    Regards, Simon

    • This reply was modified 9 years, 6 months ago by simonac.
    June 2, 2015 at 6:31 pm #453306
    Yigit

    Hi!

    Please go to Enfold theme options > Header > Mobile Menu > Header Mobile Menu activation and choose 990px.
    Then please add following code to Quick CSS as well

    @media only screen and (max-width: 1040px) {
.av-main-nav > li > a { padding: 0 8px; }}
@media only screen and (max-width: 990px) {
.html_header_top.html_header_sticky #top #wrap_all #main { padding-top: 0!important; }}

    Please make sure that > sign is not converted to – http://i.imgur.com/IDXRZQ3.png in Quick CSS field

    Cheers!
    Yigit

    June 3, 2015 at 9:23 am #453644
    simonac

    Hi Yigit,

    it worked for the blue space.

    But there are still a few things.

    1.) On touchpad 768*1024 in Portrait mode the layer slider is cut of the upper 1/3 now.

    View post on imgur.com

    2.) On a 1280*1024 Monitor the last menu points move in the second row.

    3.) The small 1px white line under the menu is still there.

    June 3, 2015 at 8:38 pm #454081
    Yigit

    Hi!

    I adjusted custom CSS code in Quick CSS field. Please review your website now

    Best regards,
    Yigit

    June 4, 2015 at 11:30 am #454371
    simonac
    This reply has been marked as private.
    June 5, 2015 at 7:02 pm #455255
    Andy

    Hey!

    1. Use this code:

    @media only screen and (max-width: 768px) {
div#layer_slider_1 {
margin-top: 154px;
}}

    and adjust as needed.

    3. Use this:

    .avia-layerslider {
border-color: none;
}

    4. Use this code:

    @media only screen and (max-width: 1024px) {
div#layerslider_1_1 {
width: 114% !important;
left: -47px;
}}

    and adjust as needed.

    Cheers!
    Andy

    June 8, 2015 at 10:02 am #455856
    simonac

    Hi Andy,

    1.) the code brings back the blue extra space. it does not make the slider top 1/3 visible. See screenshot above.

    3.) This did not work.

    4.) This one worked!

    5.) On a 1280*1024 Monitor the last menu points move in the second row. Is there a way to solve this?

    Kind Regards, Simon

    June 8, 2015 at 11:14 pm #456379
    Andy

    Hey!

    1.) I implemented this code in your Quick CSS and it seems to work fine for me:

    @media only screen and (max-width: 989px) and (min-width: 768px) {
.responsive #main .container_wrap:first-child {
margin-top: 156px;
}}

    Don’t forget to clear browser cache, if necessary.

    3.) Sorry, use this code instead:

    .avia-layerslider {
border: none;
}

    5.) When the menu is too long that normal behavior. However, it’s not happening for me. Can you show us screenshots of the issue? You could try to decrease menu font size for this screen size:

    @media only screen and (max-width: 1280px) and (min-width: 1024px) {
#top #header .av-main-nav > li > a {
font-size: 12px;
}}

    Hope this helps.

    Regards,
    Andy

    June 9, 2015 at 10:14 am #456565
    simonac

    Thanks to the support team!

    Just on Kindle Fire with 600×960 there is a blue space in the top left corner.

    View post on imgur.com

    And when i resize the browser on my laptop, at some point there comes the blue space above the slider again. This happens somewhere between 970px and 750px. This happens on Firefox.

    View post on imgur.com

    Kind Regards, Simon

    June 9, 2015 at 11:50 am #456607
    Yigit

    Hi!

    Please add following code for second issue

    @media only screen and (max-width: 970px) and (min-width: 750px) {
.html_header_top.html_header_sticky.avia-mozilla #top #wrap_all #main { padding-top: 0 !important; }}

    I cannot reproduce the first issue by resizing browser windows and i do not own a tablet unfortunately :/

    Regards,
    Yigit

    June 10, 2015 at 12:21 pm #457140
    simonac

    That made the top menu a blue background and the normal background changed its font color…

    June 11, 2015 at 2:15 pm #457826
    Ismael

    Hey!

    This is the code that causes the blue gap:

    @media only screen and (max-width: 790px) and (min-width: 768px) {.responsive #main .container_wrap:first-child {
  margin-top: 156px;
}}

    Please remove it.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 20 posts - 1 through 20 (of 20 total)
  • You must be logged in to reply to this topic.