Lay Theme Forum

    • Register
    • Login
    • Search
    • Recent
    • Tags
    • Popular
    • Users
    • Search

    Sub Menu Background

    General Discussion
    2
    17
    698
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • R
      rbnbm last edited by

      Hi,

      first of all: there is a very nice ton of tips in this forum to help with a lot things - great!

      One thing I did not find when trying to style a submenu: how can I expand the white background to the left so that the text of the submenu stays in line with the top-menu item, but has some padding? Every CSS change I tried moves the text, but not the background.

      I have been using the 'latest version' from this discussion: http://laythemeforum.com:4567/topic/913/drop-down-menu/

      Thanks!

      1 Reply Last reply Reply Quote 0
      • mariusjopen
        mariusjopen Global Moderator last edited by

        Dear @rbnbm
        can you provide a rough sketch to be more clear? :-)

        Best!

        Marius

        www.mariusjopen.world

        1 Reply Last reply Reply Quote 0
        • R
          rbnbm last edited by

          Hi!

          Sorry for being unclear, is the picture helpful?

          0_1551968805315_Screen Shot 2019-03-07 at 15.26.29.png

          I mean the space on the left of the sub menu points.

          Thanks!

          1 Reply Last reply Reply Quote 0
          • mariusjopen
            mariusjopen Global Moderator last edited by

            Dear @rbnbm
            if you post a link if could help you better. Until now I cán only say: Dive into the CSS. Use the !important tag. And apply a width: 100vw

            Hope that helps!

            Best!

            Marius

            www.mariusjopen.world

            1 Reply Last reply Reply Quote 0
            • R
              rbnbm last edited by

              Hey,

              Sorry, forgot that – here is the link:
              http://ah-fotografie.de.w019239e.kasserver.com/site

              Problem is that I cannot find the selector for the background.
              Thanks a lot!

              1 Reply Last reply Reply Quote 0
              • mariusjopen
                mariusjopen Global Moderator last edited by

                Dear @rbnbm

                does that help?

                .sub-menu {
                    width: 100vw !important;
                }
                

                Best!

                Marius

                www.mariusjopen.world

                1 Reply Last reply Reply Quote 0
                • R
                  rbnbm last edited by

                  Hi @mariusjopen

                  unfortunately not – nothing is happening...
                  Any other ideas?

                  Thanks!

                  1 Reply Last reply Reply Quote 0
                  • mariusjopen
                    mariusjopen Global Moderator last edited by

                    Dear  @rbnbm
                    for me it did. It extended the background of the navigation to the right border of the screen.

                    Best!

                    Marius

                    www.mariusjopen.world

                    1 Reply Last reply Reply Quote 0
                    • R
                      rbnbm last edited by

                      Hi @mariusjopen ,

                      Sorry, you are right! I failed to explain – there is white space on the right side, but I would like to have some space on the LEFT side of the items (letters) in the submenu. Possible?

                      1 Reply Last reply Reply Quote 0
                      • mariusjopen
                        mariusjopen Global Moderator last edited by

                        Dear @rbnbm
                        have a look here:

                        .sub-menu {
                            padding-left: 15px !important;
                        }
                        

                        And here. You can use the :hover in the Chrome Inspector:
                        0_1552669612107_Bildschirmfoto 2019-03-15 um 18.06.43.png

                        Best!

                        Marius

                        www.mariusjopen.world

                        1 Reply Last reply Reply Quote 0
                        • R
                          rbnbm last edited by

                          Dear @mariusjopen ,

                          Thanks, but I already got that to work, I am looking for a code so that it looks like this: 0_1552976178143_menu-design.jpg

                          Possible? Thanks again!

                          1 Reply Last reply Reply Quote 0
                          • mariusjopen
                            mariusjopen Global Moderator last edited by

                            Dear @rbnbm
                            but that was the solution I provided, no?
                            You can also play around with the code I gave you.

                            Best!

                            Marius

                            www.mariusjopen.world

                            1 Reply Last reply Reply Quote 0
                            • R
                              rbnbm last edited by

                              Dear @mariusjopen ,

                              Sorry, but your code delivers the following:

                              0_1553165750853_Screen Shot 2019-03-21 at 11.54.25.png

                              The text is indented, not aligned with the item of the menu. Minor, I know, but still... I already tried different things but couldn't make it work. If it's not possble - okay. (I send you the login data via chat regarding the other matter, if you want to take a look....)

                              Thanks again, your help is much appreciated!!!

                              1 Reply Last reply Reply Quote 0
                              • mariusjopen
                                mariusjopen Global Moderator last edited by

                                Dear @rbnbm
                                try this one:

                                .primary .sub-menu {
                                    display: none;
                                    position: absolute;
                                    background-color: white;
                                    border: 0px solid grey;
                                    padding-top: 10px;
                                    padding-left: 20px;
                                    margin-left: -20px !important;
                                    padding-bottom: 20px;
                                }
                                

                                Best!

                                Marius

                                www.mariusjopen.world

                                1 Reply Last reply Reply Quote 0
                                • R
                                  rbnbm last edited by

                                  Hi @mariusjopen ,

                                  Sorry, does not work, now all Sub Items are in line:
                                  0_1553503036988_Screen Shot 2019-03-25 at 09.27.46.png

                                  Nevermind, let's leave it at that. I'll file this under "not possible".

                                  Any news on why the search does not work (my chat message)? Did you get my login data?

                                  Thanks
                                  rbnbm

                                  1 Reply Last reply Reply Quote 0
                                  • mariusjopen
                                    mariusjopen Global Moderator last edited by

                                    Dear @rbnbm
                                    try this then. I think this is what you want:

                                    .primary .sub-menu {
                                        display: none;
                                        position: absolute;
                                        background-color: white;
                                        border: 0px solid grey;
                                        padding: 10px 0px 10px 10px;
                                        width: 100vw;
                                    }
                                    

                                    I wrote Armin about the search and he will reply soon I assume.

                                    Best!

                                    Marius

                                    www.mariusjopen.world

                                    1 Reply Last reply Reply Quote 0
                                    • R
                                      rbnbm last edited by

                                      dear @mariusjopen ,

                                      Thanks, but it does not work ; -)

                                      Text is indented again.

                                      0_1553768089126_Screen Shot 2019-03-28 at 11.14.35.png

                                      As I see it, the padding indents the text to the right. A negative value puts it back in place, but then there is no white space to the left.

                                      As I said, not perfect, but also not a big deal. I'm just wondering whether it is possible at all (I also tried different negative values, to no effect).

                                      Just to make sure, here is all of the code I am using right now for the menu:

                                      .primary .sub-menu {
                                      display: none;
                                      position: absolute;
                                      background-color: white;
                                      border: 0px solid grey;
                                      padding: 10px 0px 10px 10px;
                                      }
                                      .primary .sub-menu li {
                                      display: block;
                                      }
                                      .menu-item:hover .sub-menu{
                                      display: block;
                                      }

                                      Looking forward to the search thing...

                                      Best,
                                      RBNBM

                                      1 Reply Last reply Reply Quote 0
                                      • First post
                                        Last post

                                      Before you post

                                      Use the Search Feature. Maybe there is already a solution to your issue.

                                      1. Update Lay Theme and all Lay Theme Addons
                                      2. Disable all Plugins
                                      3. Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code ", click "Save Changes"
                                      4. Now see if your problem solved itself
                                      5. Go here, see if your problem is listed here:
                                      Troubleshooting

                                      When you post:
                                      1. Post a link to where the problem is
                                      2. If the problem is difficult to explain, post screenshots / link to a video to explain it

                                      Thanks!

                                      Online Users

                                      M
                                      M
                                      M

                                      Recent Topics

                                      • M

                                        komische boxen auf der Website

                                      • S

                                        Theme crashed - because of Polylang?

                                      • J

                                        Split Screen just on front page / subpages without the split?

                                      • Y

                                        image quality dropped

                                      laytheme.com