Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • July 12, 2017 at 11:35 pm #820265
    webWahine

    Hello

    I’ve got this in my child style.css, and I’m trying to have the MENU | to the left of the pancake, and the Chinese characters to the right.

    Also, I need the Chinese characters to link to a PDF. Please advise. Thank you :)

    /* mobile menu */

.main_menu:before {
	content: 'MENU |';
	font-size: 13px;
}

.main_menu:after {
    content: "中文";
    font-size: 14px !important;
    left: 2px;
    position: absolute;
    top: 30px;
}
    July 15, 2017 at 4:56 am #821541
    Ismael

    Hey webWahine,

    Thank you for using Enfold.

    The dev site is not loading. Did you transfer it?

    Best regards,
    Ismael

    July 15, 2017 at 5:28 am #821549
    webWahine

    Hi ismael
    No. It’s in Dev and hasn’t moved please try again.

    July 16, 2017 at 12:43 pm #821988
    Victoria

    Hi webWahine,

    Maybe you should put those in div.avia-menu.av-main-nav-wrap
    http://imgur.com/a/g8Cex and then try to adjust?

    Best regards,
    Victoria

    July 16, 2017 at 8:50 pm #822161
    webWahine

    Didn’t work; looks like that is before the mobile menu element.

    div.avia-menu.av-main-nav-wrap:before {
	content: 'MENU |';
	font-size: 13px;	
}

div.avia-menu.av-main-nav-wrap:after {
    content: "中文";
	font-style: Arial;
    font-size: 14px !important;
    left: 2px;
    position: absolute;
    top: 30px;	
}
    July 16, 2017 at 9:08 pm #822168
    webWahine

    Trying more options, I managed to target the MENU element, but I’d like to add a hover effect to the hamburger, plus the CH is still in the wrong place. Please advise :)

    .avia-menu.av-main-nav-wrap:after {
    content: "中文";
	font-style: Arial;
    font-size: 14px !important;
    left: 2px;
	/*display: inline-block;*/
    position: absolute;
    /* top: 30px;*/
}

.av-hamburger:before {
	content: 'MENU';
	font-size: 14px;
	padding-right: 10px;
}
    July 16, 2017 at 11:25 pm #822228
    webWahine

    Still working on this myself.

    I looked at this post –

    It’s placed a widget before, not after the hamburger, and doesn’t seem to read the HTML, so is showing everything. I’ve added this to my css –

    /* wdiget after header */

#header .widget {
  right: 0%;
  padding-top: 0;
  position: absolute;
  top: 0;
  z-index: 999;
}
    July 16, 2017 at 11:26 pm #822229
    webWahine

    Sorry, the URL didn’t work –

    Adding a widget area to the header

    July 17, 2017 at 4:53 am #822296
    Ismael

    Hi,

    The following site is not loading. http://dev.ifortunehomes.com/

    Best regards,
    Ismael

    July 17, 2017 at 5:51 am #822315
    webWahine

    Hello, Ismael
    As noted previously, the site is password protected. The password is in my first private field, but I am adding here, again, in the private field :)

    July 18, 2017 at 7:58 am #823134
    Ismael

    Hi,

    We edited the text widget. Please adjust the right and top position.

    #header .widget {
    right: -40px;
    padding-top: 0;
    position: absolute;
    top: -10px;
    z-index: 999;
}

    Best regards,
    Ismael

    July 18, 2017 at 8:16 pm #823479
    webWahine

    Ok! Wonderful :) I tweaked it some more because the CH characters were too close to the edge, so here is my final code; hopefully this helps others! Thank you for your help!

    /* before mobile menu */

.av-hamburger:before {
	content: 'MENU';
	font-size: 14px;
	padding-right: 10px;
}

/* adjust pancake to give the CH some space */

.main_menu {
	margin-right: 60px;
}

/* header widget after header */

#header .widget {
    right: 0px;
    padding-top: 0;
    position: absolute;
    top: -15px;
    z-index: 999;
	font-size: 18px;	
}
    July 20, 2017 at 12:27 am #824264
    webWahine

    Oh, one more item, please – how can I change the colour of the hamburger on hover?

    July 20, 2017 at 4:37 am #824345
    Ismael

    Hi,

    Thank you for the update. For the hover color, please use this code.

    .av-burger-menu-main:hover .av-hamburger-inner, .av-burger-menu-main:hover .av-hamburger-inner:before, .av-burger-menu-main:hover .av-hamburger-inner:after {
    background-color: red !important;
}

    Best regards,
    Ismael

    July 20, 2017 at 4:58 am #824358
    webWahine

    Perfect! Thank you so much, Ismael :)

    July 20, 2017 at 12:57 pm #824550
    Sarah

    Hi,

    We’re glad that Ismael was able to assist you! We’ll close the thread now. For any other questions or issues, feel free to post them here on the forum and we will do our best to help you.

    Thank you for using Enfold.
    Cheers!
    Sarah

  • Author
    Posts
Viewing 16 posts - 1 through 16 (of 16 total)
  • The topic ‘Add menu text before mobile menu and linked text after’ is closed to new replies.