Customize mobile post layout mobile menu

  • echavous

    (@echavous)


    8 years, 2 months ago

    Hi,

    I am using the WP Evolve theme at http://www.cactusandfog.com.

    1. I would like to add custom css to enable post excerpts ONLY on mobile. I am happy with the desktop version showing the entire posts. But for mobile, I would prefer each post to show a featured image with a post excerpt and read more link. I’m sure there’s an easy coding fix here, but I’ve searched for hours and haven’t found the answer yet.

    2. I’d like to customize the mobile menu icon/button (those little bars). I would prefer to use my own menu img in place of the bars, and I would like to remove the thin button border/shadow.

    3. I’d like to customize the style of the mobile menu. Right now, it’s got a gray background, with thin divider lines, all uppercase, using an awkward font, and the nested menu items are all preceeded by a dash. I’d like to use some css to switch the bgcolor to black, remove the divider lines (no borders/shadows!), change the font to match my desktop layout, and fix the nested li items so they do not have a dash in front of them. I just can’t figure out the menu class or id…

    Appreciate your help!

Viewing 5 replies - 1 through 5 (of 5 total)
  • neotechnomad

    (@neotechnomad)

    8 years, 2 months ago

    Use a Custom CSS plugin for any changes, as when the main theme updates, all the changes you may have made to the main theme will be lost.

    neotechnomad

    (@neotechnomad)

    8 years, 2 months ago

    I would like to add custom css to enable post excerpts ONLY on mobile

    This would not be CSS, it would take modifying the PHP code for the mobile template, and that would require creating a Child Theme for any changes.
    No ‘easy’ fix.

    I’d like to customize the mobile menu icon/button (those little bars). I would prefer to use my own menu img in place of the bars, and I would like to remove the thin button border/shadow.

    This could be done with CSS.

    I’d like to customize the style of the mobile menu. Right now, it’s got a gray background, with thin divider lines, all uppercase, using an awkward font, and the nested menu items are all preceeded by a dash. I’d like to use some css to switch the bgcolor to black, remove the divider lines (no borders/shadows!), change the font to match my desktop layout, and fix the nested li items so they do not have a dash in front of them.

    This could be done with CSS.

    You are asking for some relatively major changes that, if you do not have skills in CSS and some knowledge of PHP, will be difficult to do through the forum.

    Thread Starter echavous

    (@echavous)

    8 years, 2 months ago

    Thanks, I’m adept with css and pretty sure I can figure out the php with a little tinkering… I just need to know the name/class/id/what have you for the items. Can’t find anything related to mobile-specific design aside from screen size and screen reader text options.

    neotechnomad

    (@neotechnomad)

    8 years, 2 months ago

    In Firefox, go to your site, then in the browser menu bar – Tools > Web Developer > Toggle Tools. Make sure “Inspector” is highlighted in top left corner of window. Hovering over the elements in the Tools, you will see the corresponding section of your site overlayed with a semi-transparent color.
    Clicking on the small triangle beside the elements name in Tools, opens the element up to view more elements.
    Clicking on the element will show the corresponding CSS in the “Rules” window on the right. Make sure “Rules” is highlighted at top.
    Element names are inside the various “<div” tags.

    Google Chrome Dev Tools work similar.

    Thread Starter echavous

    (@echavous)

    8 years, 2 months ago

    Right on @neotechnomad, I’ll give that a try! Appreciate it.
    In the meantime, if any evolve users already know the attribution LMK.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Customize mobile post layout mobile menu’ is closed to new replies.