Secondary Menu - Sub-Menu Alignment

On my website at https://dating.christiangays.com
The first menu item in the secondary menu is "How To Connect With Others"
The sub-menu under that item is 01. I'm Looking For Friends .....

Currently it is right-aligned beneath the parent menu item.

Can you tell me please how to line up that sub-menu item with the left side of the parent menu item so that it doesn't extend off the left side of the page.

Support Access is granted.
Thank you.

  • Nithin

    Hi Mary,

    Hope you are doing good today. :slight_smile:

    Can you tell me please how to line up that sub-menu item with the left side of the parent menu item so that it doesn't extend off the left side of the page.

    I have added the following CSS in the custom CSS section of your site located under, Appearance > Custom CSS

    body .secondary-navigation ul ul {
         left: 0%;
    }

    Now the menu does seem to align to the left, please check, and let us know if you still need any further assistance. Have a great weekend ahead. :slight_smile:

    Kind Regards,
    Nithin

  • Adam Czajczyk

    Hello Mary!

    That may be happening because CSS is processed in a "linear way" that means that all the rules are processed in order they are loaded by the site and if there are two or more rules targeted at the same element, the last one will be the one that works.

    Let me give you an example.

    p {color:red;}
    p {color:blue;}

    Both these lines address paragraph HTML tag in general and in this case the text within that tag will be blue, not red.

    To make it more complex, apart from CSS being processed that way, it's also that the more "specific" selectors override more "general" selectors. Another example:

    p {color:red;}
    .mytext {color:blue;}

    where the HTML of the page is like that

    <p> This is some text </p>
    <p class="mytext"> This is my special text </p>
    <p> This is another message </p>

    Now the "This is some text" and "This is another message" text would be red because of the first CSS rule but the "This is my special text" text would be blue because of the second CSS rule.

    To add last complication to that, the same element of the site can be often targeted in a few different ways so even if at first it looks like a given element has been addressed only once, it may turn out that somewhere below that rule is another one that targets the same element and overrides it. Take this HTML for example:

    <body>
    <div id="myblock">
    <p class="mytext">
    Some text
    </p>
    </div>
    </body>

    If you now want to target only "Some text" string, you may just use

    .mytext {color:red;}

    but you could also use

    #myblock p {color:red;}

    or

    body div p {color:red;}

    and some more combinations.

    I realize that it may sound a bit complex so the point is that if the CSS doesn't work after being moved to the top of the CSS code, there must be some other rule that's overwriting it somewhere below.

    Kind regards,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.