This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Expand mobile menu on text click, not on arrow click

Open 7 replies technicalthemetheme-unwind
Ger17_K
8 years ago · Last reply by Ger17_K 8 years ago

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.

Need fast email support? Get SiteOrigin Premium

Replies

7
  1. Alex S Staff 8 years, 2 months ago

    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. Ger17_K 8 years, 2 months ago

    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. Alex S Staff 8 years, 2 months ago

    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. Ger17_K 8 years, 1 month ago

    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. Alex S Staff 8 years, 1 month ago

    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. Ger17_K 8 years, 1 month ago

    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. Ger17_K 8 years, 1 month ago

    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.

Have a different question or issue?

Start New Thread