Viewing 23 posts - 1 through 23 (of 23 total)
  • Author
    Posts
  • June 20, 2018 at 1:03 pm #975267
    Dennis

    Hi,

    What changes to my CSS do I need to make the underline of a menu title to be exact as long as the menu title itself. At the moment it is wider. I played around with .avia-menu-fx, but changing the width of it is not the solution.

    Please help.

    Thanks Dennis

    • This topic was modified 6 years, 6 months ago by Dennis.
    June 20, 2018 at 1:54 pm #975295
    Victoria

    Hey dennsen,

    Best regards,
    Victoria

    June 20, 2018 at 2:09 pm #975311
    Dennis

    Hi,

    No, I want the underline to be exact as long as the word/title.

    Regards
    Dennis

    June 21, 2018 at 10:58 am #975744
    Nikko

    Hi Dennis,

    If you want it to auto adjust with the width of the menu item it’s possible with javascript/jquery.
    However it would be impossible with css with it’s current html structure if you won’t define the width of each avia-menu-fx in each menu item.
    The easiest way would be to define it’s fixed width in px.

    Best regards,
    Nikko

    June 21, 2018 at 11:52 am #975760
    Dennis

    Hi Nikko,

    How would you define the fixed width? I mean it wouldn’t be the same width on both sides, correct? Correct me if I am wrong.

    Regards
    Dennis

    June 21, 2018 at 2:53 pm #975809
    Nikko

    Hi Dennis,

    Yes, it woiuldn’t. Just add this css code in Quick CSS (located in Enfold > General Styling):

    #top #avia-menu #menu-item-224 .avia-menu-fx {
    margin-left: 13px;
    width: 50px;
}

#top #avia-menu #menu-item-483 .avia-menu-fx {
    margin-left: 13px;
    width: 35px;
}

#top #avia-menu #menu-item-1573 .avia-menu-fx {
    margin-left: 13px;
    width: 51px;
}

#top #avia-menu #menu-item-551 .avia-menu-fx {
    margin-left: 13px;
    width: 83px;
}

#top #avia-menu #menu-item-292 .avia-menu-fx {
    margin-left: 13px;
    width: 58px;
}

#top #avia-menu #menu-item-291 .avia-menu-fx {
    margin-left: 13px;
    width: 47px;
}

#top #avia-menu #menu-item-246 .avia-menu-fx {
    margin-left: 13px;
    width: 59px;
}

    Hope it helps.

    Best regards,
    Nikko

    June 21, 2018 at 3:02 pm #975818
    Dennis

    I copied your code into my style.css, but the result isn’t really what it should be. But I understand what you tried to achieve. This is of course not an elegant solution at all.

    I think I should request that as a feature for enfold!

    June 21, 2018 at 3:14 pm #975824
    Nikko

    Hi Dennis,

    Hmm, is the one on the screenshot (link in private content) the effect you get?
    Yes, it’s not really an elegant solution, a js solution would be better since it automatically calculate the width and apply it to those lines.

    Best regards,
    Nikko

    June 21, 2018 at 3:24 pm #975830
    Dennis

    Nope. Problem is, that your browser probably translated the russian menu into english and you put the values for the english versions into the css. But the russian menu titles don’t have the same length as the english words. You know what I mean?

    June 22, 2018 at 10:09 am #976202
    Nikko

    Hi Dennis,

    Yes, I understand though we can fix it but if it’s translated the length is different.
    Can you try to add this php/js code at the bottom of your functions.php:

    function fx_width(){
?>
<script>
$( document ).ready(function() {
	$( "#avia-menu > li > a" ).each(function( index ) {
		var width = $( this ).find( ".avia-menu-text" ).width();
		$( this ).find( ".avia-menu-fx" ).width( width ).css('margin-left', '13px');
	});
});
</script>
<?php
}

add_action('wp_footer', 'fx_width');

    Let us know if this helps.

    Best regards,
    Nikko

    June 25, 2018 at 10:24 am #977352
    Dennis

    Hi Nikko,

    I added your code to my funktions.php, but nothing changed. Did I miss something?

    Dennis

    June 25, 2018 at 12:52 pm #977420
    Victoria

    Hi dennsen,

    Try the code like this:

    
function fx_width(){
?>
<script>
jQuery( document ).ready(function() {
	jQuery( "#avia-menu > li > a" ).each(function( index ) {
		var width = jQuery( this ).find( ".avia-menu-text" ).width();
		jQuery( this ).find( ".avia-menu-fx" ).width( width ).css('margin-left', '13px');
	});
});
</script>
<?php
}

add_action('wp_footer', 'fx_width');

    If you need further assistance please let us know.
    Best regards,
    Victoria

    • This reply was modified 6 years, 5 months ago by Victoria.
    June 25, 2018 at 2:04 pm #977474
    Dennis

    Hi Victoria,

    It looks like it is close to what I need. But if you look very closely at it, there are some little offsets between lines and words. The underline of the word “ITRACO” starts a little bit too late and the underline of the word “Полезное” starts too early. Why is the width function so inaccurate? I played with the margin value inside your function, but it doesn’t solve the problem.

    Thanks for further assistance!
    Dennis

    June 25, 2018 at 2:47 pm #977511
    Victoria

    Hi dennsen,

    Have you tried adding or removing a few pixels to the width value?

    Best regards,
    Victoria

    June 25, 2018 at 3:01 pm #977524
    Dennis

    Yes, as I mentioned above I played with the value. Odd thing is, that the underline is not evenly wrong on each word. On some words there are 1 or 2 pixel too much on the left side and on some words on the right side!

    June 26, 2018 at 5:05 pm #978020
    Dennis

    Don’t forget me ;)

    June 26, 2018 at 7:04 pm #978084
    Yigit

    Hi,

    Please post us your login credentials (in the “private data” field), so we can take a look at your backend.

    1. Install and activate ” Temporary Login Without Password “.
    2. Go to ” Users > Temporary Logins ” on the left-side menu.
    3. Click ” Create New “.
    4. Add the email address for the account ( you can use (Email address hidden if logged out) ), as well as the ” Role ” making that the highest possible and the expiry about four days
      ( do be sure that we have enough time to debug ).
    5. Click ” Submit “.
    6. You’ll now have a temporary account. Please provide us here in the private section the URL, so we can login and help you out.

    When your issue is fixed, you can always remove the plugin!
    If you prefer to not use the plugin, you can manually create a admin user and post the login credentials in the “private data” field.

    Best regards,
    Yigit

    June 27, 2018 at 8:17 am #978287
    Dennis

    Here you go

    June 27, 2018 at 10:01 am #978315
    Nikko

    Hi Dennis,

    I tried the login access you gave however it doesn’t work, please check.

    Best regards,
    Nikko

    June 27, 2018 at 10:41 am #978345
    Dennis

    Sorry, I didn’t save the user. Now it should work!

    June 28, 2018 at 5:07 pm #978959
    Yigit

    Hi,

    I deleted custom code from bottom of Functions.php file and added following code to bottom of Style.css file

    .avia-menu-fx {
    display: block;
    position: relative;
}

    Please review your website

    Best regards,
    Yigit

    June 29, 2018 at 8:35 am #979207
    Dennis

    Thanks alot Yigit. That worked for me! Topic can be closed.

    June 29, 2018 at 9:18 am #979214
    Yigit

    Hi,

    You are welcome!
    Let us know if you have any other questions or issues and enjoy your weekend!

    Best regards,
    Yigit

  • Author
    Posts
Viewing 23 posts - 1 through 23 (of 23 total)
  • The topic ‘Define Menu Underline Width .avia-menu-fx’ is closed to new replies.