Home>Support>Expand mobile menu on text click, not on arrow click

Expand mobile menu on text click, not on arrow click

By Ger17_K, 7 years ago. Last reply by Ger17_K, 7 years ago.
Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].

Dear SiteOrigin Support,

on my website https://hike-and-travel.com, I am using a menu entry with submenu items. On a mobile device, this menu item “Galleries” only expands when clicking on the arrow that shows up when using a mobile device. Is there any possibility of making the whole row / text clickable? So that wherever I click on that row, the dropdown menu appears?

Also, I would like to have the arrow and all submenu items appear centered. I have managed to center the items by using

display:inline
– however, I do not think this is appropriate, is it? Can I also position the arrow just next to the menu item text?

Thanks in advance, I highly appreciate any advice.

Best regards,
Steffen

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 7 years, 7 months ago Alex S
    Hi, I Work Here

    Hi Steffen,

    You can change this with some custom CSS. If you navigate to AppearanceCustom CSS, you’ll get our custom CSS editor. Please add the following CSS:

    .main-navigation, #mobile-menu-button {
	width: 100%;
}

    How does that look?

    You might also need to install the SiteOrigin CSS Editor

  2. 7 years, 6 months ago Ger17_K

    Hi Alex,

    sorry for getting back to you so late. I did not have internet connection for a while.

    Thanks for your advice. Unfortunately, after adding the custom css I do not see any difference:

    Any other suggestions?

  3. 7 years, 6 months ago Alex S
    Hi, I Work Here

    Hi Steffen,

    I just had a look at your website and the CSS appears to be working without issue. Can you please try clearing your browser cache to see if that helps?

  4. 7 years, 6 months ago Ger17_K

    Hello Alex,

    I have tried with both my cell phone and the laptop (imitating mobile resolution) and the dropdown menu still only appears when I click on the arrow. Is this different for you?

    Thanks for taking your time to help me.

    Best regards,
    Steffen

  5. 7 years, 6 months ago Alex S
    Hi, I Work Here

    Hi Steffen,

    Oh! Sorry, I misunderstood what you were after.

    Please replace the above CSS with the following CSS instead:

    #mobile-navigation ul li .dropdown-toggle {
	width: 100%;
}

#mobile-navigation ul li .dropdown-toggle .svg-icon-submenu {
	float: right;
}

#mobile-navigation ul li a {
	padding: 0 !important;
}

    How does that look?

    You might also need to install the SiteOrigin CSS Editor.

  6. 7 years, 6 months ago Ger17_K

    Hi Alex,

    thanks for the help. Your code works fine, but the

    #mobile-navigation ul li a {
	padding: 0 !important;
}

    option removes all padding (The menu items become really small). I only want the right padding to be 0. So I changed this to:

    #mobile-navigation ul li a {
	padding-right: 0 !important;
}

    Best regards,
    Steffen

  7. 7 years, 6 months ago Ger17_K

    Hi again,

    I also changed

    #mobile-navigation ul li a {
	padding-right: 0 !important;
}

    to

    #mobile-navigation ul li a {
	padding-right: 0 !important;
  width: 100% !important;
}

    and ommitted my previously defined

    #mobile-navigation ul li a {
  display: inline;
}

    to center the submenu items.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More