Margin of three lines in click button inherited from page

  • Resolved TheRealMuffin

    (@therealmuffin)


    9 years, 7 months ago

    Hello all,

    I’m trying out the Responsive Menu plugin and it seems to work very well. However, the margin of the three lines is huge, so two of the three lines are pushed out of the black box that should contain it.
    I suspect the margin is inherited from the rest of the page.

    I can define “margin: 2px;” in “#click-menu .threeLines .line” which more or less solves the issue. However, a cleaner solution would be that the plugin by default defines the margin explicit so it overrides css defined by the main page.

    The issue can be seen at https://temp.muffins.diskstation.me:8080/temp.html

    Assuming my analysis is correct, can the margin be explicitly defined in an upcoming release?

    Thanks in advance and kind regards, Maarten

    https://www.ads-software.com/plugins/responsive-menu/

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Contributor responsivemenu

    (@responsivemenu)

    Hi Maarten,

    There is already an option for this in the admin.

    However you have an over-riding style inside your themes style.css file on line 118, which reads as follows:

    .line {
    border-top: 1px dotted #ddd;
    margin-bottom: 29px;
    margin-top: 28px;
}

    Please update this to be more specific and it should fix the issue.

    All the best

    Thread Starter TheRealMuffin

    (@therealmuffin)

    Hello,

    Thanks for your fast reply though I’m not sure I agree with it.

    The margin-bottom is not overridden and I can set it fine in the ‘look and feel’ menu. However, it is the margin-top that’s the issue. That one I can not set in the ‘look and feel’ menu and it is not set at a default value either (e.g. 0px). Therefore, it takes the value of the parent element (which is set at 28px). Obviously I can change that and set it to 0px, however, that might screw other parts of the page that rely on that 28x, it’s there for a reason I would suspect (although none that I can see now).

    But other than that, if an element relies on margin-top to be 0px for its intended purpose, wouldn’t it be good practice to explicitly define it rather than assume the correct value will be inherited?

    Regardless, this issue is easily fixable on either end and won’t limit my use… it’s an amazing plugin, never knew the WordPress platform is so flexible (first time user).

    Kind regards, Maarten

    Thread Starter TheRealMuffin

    (@therealmuffin)

    On second thought, I do see your point. Although I don’t think it actually overrides anything, it just defines more. But it can define a whole lot more… so while setting margin-top would seem to be good practice, what do I know, I’m not really a programmer… So, I guess I will set this topic to solved.

    Kind regards, Maarten

    Plugin Contributor responsivemenu

    (@responsivemenu)

    Hi Maarten,

    The problem is not with defining it, but that it is not specific enough a selector – it just happens that you have an element on your page with the class “line” and so does my plugin.

    You could append your “line” style with something more specific and then they won’t interact with eachother anymore.

    Either way, glad you are enjoying the plugin and if you need further help please let me know!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Margin of three lines in click button inherited from page’ is closed to new replies.