Skip to content
  • Recent
  • Tags
  • Popular
  • Users
  • Search
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse

Lay Theme Forum

  1. Home
  2. General Discussion
  3. Sub Menu Background

Sub Menu Background

Scheduled Pinned Locked Moved General Discussion
17 Posts 2 Posters 1.1k Views
  • 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 Offline
    R Offline
    rbnbm
    wrote on last edited by
    #1

    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
    0
    • mariusjopenM Offline
      mariusjopenM Offline
      mariusjopen
      Global Moderator
      wrote on last edited by
      #2

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

      Best!

      Marius

      www.mariusjopen.world

      1 Reply Last reply
      0
      • R Offline
        R Offline
        rbnbm
        wrote on last edited by
        #3

        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
        0
        • mariusjopenM Offline
          mariusjopenM Offline
          mariusjopen
          Global Moderator
          wrote on last edited by
          #4

          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
          0
          • R Offline
            R Offline
            rbnbm
            wrote on last edited by
            #5

            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
            0
            • mariusjopenM Offline
              mariusjopenM Offline
              mariusjopen
              Global Moderator
              wrote on last edited by
              #6

              Dear @rbnbm

              does that help?

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

              Best!

              Marius

              www.mariusjopen.world

              1 Reply Last reply
              0
              • R Offline
                R Offline
                rbnbm
                wrote on last edited by
                #7

                Hi @mariusjopen

                unfortunately not โ€“ nothing is happening...
                Any other ideas?

                Thanks!

                1 Reply Last reply
                0
                • mariusjopenM Offline
                  mariusjopenM Offline
                  mariusjopen
                  Global Moderator
                  wrote on last edited by
                  #8

                  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
                  0
                  • R Offline
                    R Offline
                    rbnbm
                    wrote on last edited by
                    #9

                    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
                    0
                    • mariusjopenM Offline
                      mariusjopenM Offline
                      mariusjopen
                      Global Moderator
                      wrote on last edited by
                      #10

                      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
                      0
                      • R Offline
                        R Offline
                        rbnbm
                        wrote on last edited by
                        #11

                        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
                        0
                        • mariusjopenM Offline
                          mariusjopenM Offline
                          mariusjopen
                          Global Moderator
                          wrote on last edited by
                          #12

                          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
                          0
                          • R Offline
                            R Offline
                            rbnbm
                            wrote on last edited by
                            #13

                            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
                            0
                            • mariusjopenM Offline
                              mariusjopenM Offline
                              mariusjopen
                              Global Moderator
                              wrote on last edited by
                              #14

                              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
                              0
                              • R Offline
                                R Offline
                                rbnbm
                                wrote on last edited by
                                #15

                                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
                                0
                                • mariusjopenM Offline
                                  mariusjopenM Offline
                                  mariusjopen
                                  Global Moderator
                                  wrote on last edited by
                                  #16

                                  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
                                  0
                                  • R Offline
                                    R Offline
                                    rbnbm
                                    wrote on last edited by
                                    #17

                                    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
                                    0
                                    Reply
                                    • Reply as topic
                                    Log in to reply
                                    • Oldest to Newest
                                    • Newest to Oldest
                                    • Most Votes


                                    I also code custom websites or custom Lay features.
                                    ๐Ÿ’ฟ Email me here: ๐Ÿ’ฟ
                                    info@laytheme.com

                                    Before you post:
                                    1. When using a WordPress Cache plugin, disable it or clear your cache.
                                    2. Update Lay Theme and all Lay Theme Addons
                                    3. Disable all Plugins
                                    4. Go to Lay Options โ†’ Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"

                                    This often solves issues you might run into

                                    When you post:
                                    1. Post a link to where the problem is
                                    2. Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
                                    3. If the problem is difficult to explain, post screenshots / link to a video to explain it
                                    Online Users
                                    Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com
                                    laytheme.com
                                    • Login

                                    • Don't have an account? Register

                                    • Login or register to search.
                                    • First post
                                      Last post
                                    0
                                    • Recent
                                    • Tags
                                    • Popular
                                    • Users
                                    • Search