Viewing 20 posts - 1 through 20 (of 20 total)
  • Author
    Posts
  • #840776

    i’m writing some simple css for my menu buttons per page … and i cannot find my “page-id” when inspecting within the web browser for the SEARCH page.

    please help! :)

    thanks,

    chris

    #840846

    page id’s, post id’s etc only apply to things created within WordPress. These are given an ID so WordPress can identity things in functions like
    is_page()

    The search page isn’t really a page it’s a template to hold content that the search.php and loop-search.php will pull depending on search out come.

    You can edit either of them files to style the search page button by adding a class or using in-line css. Unless using a child theme changes will be lost.

    On the search result pages content is wrapped in a class of .template-search which you could use to target the button.
    For example to change the color of the round pagination buttons you use…

    .template-search .pagination a {
        background-color: #eebbee;
    }

    TJ

    • This reply was modified 7 years, 3 months ago by tjswarbs78.
    #840966

    Hey TJ,

    Thanks for you input on this subject.

    Best regards,
    Jordan Shannon

    #840982

    thanks tj!

    in my case … you helped me disable a different set of menu links for pages outside of my one-page home page.

    on the SEARCH page … all the hidden main menu links show up. OUCH! :)

    here’s the page: http://watchman.wpengine.com

    thanks!

    chris

    #841072

    Hi,

    So your end goal is to target the search page only? Are you trying to disable links on that page?

    Best regards,
    Jordan Shannon

    #841101

    yes, i have menu items that need to be HIDDEN on the SEARCH page.

    to make a long story short … i am using menu links with anchors in them that don’t work on the blog page because it’s separate from the one-page home page.

    i’ve used PAGE_ID to hide links on the other pages. :)

    not so with the search page? no id?

    ideas?

    thanks!

    chris

    #841252

    Morning,

    rather than using .page-id-xxx try using .template-search then the menu item id.
    A neater way maybe to set the menu items to be hidden as a global rule rather than on a specific page.

    #menu-item-xx {hide} will hide then items on every page. Which will be easier than finding every page id.
    Then on the page you want them to show (which is only one page?) use..

    .page-id-xx #menu-item-xx {show}

    If you are hiding on more pages use a global to hide, if you are showing on more pages use a global to show. That make sense?

    TJ

    • This reply was modified 7 years, 3 months ago by tjswarbs78. Reason: it's early and I can't spell
    #841287

    Hey vlkwatchman,

    Let us know if TJ’s suggestion worked for you.

    Best regards,
    Jordan Shannon

    #841467

    hey there, tj! thanks SO MUCH for your time!

    AND GREAT IDEA!! I LIKE WHERE THIS IS GOING!! :)

    1. unfortunately, using “.template-search” to hide the #menu items INSTEAD of the .page-id did not work. nothing changed. i made sure i had the correct menu item numbers. i still see EVERY possible menu item. strange. i’m able to hide the items i want on the pages. but NOT in the search. is there anything other than “.template-search” that i can use instead?

    2. also unfortunately, the #menu-item-xx {hide} does NOT hide the menu items globally. i tried every single menu item. they were ALL still on all the pages. darn.

    i am doing all of this in the quick css. are we sure these codes will work in quick css? is there somewhere else i should be placing them?

    thanks again! i REALLY appreciate your help!

    i feel like we are SO CLOSE!

    blessings,

    chris

    #841474

    HEY … GREAT NEWS!! (and i think you’ll be proud of me, TJ!)

    i did some thinking for myself!

    1. i found that #menu-item-xx {hide} did not work for me. HOWEVER, #menu-item-xx {display:none;} DOES work! :) so that solves one problem for me. :)

    2. also … while .page-id-xx #menu-item-xx {show} did not work for me … .page-id-xx #menu-item-xx {display:contents;} DOES work! :)

    do you see any problems with me using these attributes? they seem to work okay.

    NOW … the .template-search STILL does not work. perhaps there is something else? since switching over to the new, cleaner way, i NOW have NO MENU on the search page (because all are globally hidden). BEFORE, i had ALL the menu items. ha!

    we’re almost there! thanks again for your help!

    appreciate you,

    chris

    unfortunately,

    #841478

    ha! okay, this was REALLY FREAKY …

    i checked in firefox and it was showing the menu in a VERTICAL line instead of horizontal.

    i checked in CHROME and there was no menu at all! nothing.

    so …

    i changed the “display:contents” to “display:inline” and NOW everything seems to be okay in all browsers. :)

    whew.

    thanks!

    STILL no dice with the .template-search for showing the menu items. help much appreciated.

    best,

    chris

    #842099

    Ah yes {hide} and {show} are not vaild css values.
    I was being lazy and hoping you’d use the correct css from other posts

    You can lead a horse to water… ;)
    good that you are picking up on things though. Coding isn’t as scary as it looks

    You can display items as block, inline or inline-block

    TJ

    #842103

    thanks tj! :)

    NOW … the .template-search STILL does not work. perhaps there is something else? since switching over to the new, cleaner way (global hide), i NOW have NO MENU on the search page (because all are globally hidden). BEFORE, i had ALL the menu items. ha!

    example: http://watchman.wpengine.com/?s=erick (hosted on WPengine)

    we’re almost there! thanks again for your help!

    appreciate you,

    chris

    #842113

    AH HA!
    The search page with results has a class of .search-results
    The search page with no results has a class of .search-no-results
    I have no clue where I got .template-search from lol

    so

    .search-results #menu-item-xx {show}

    should work (Note I’m being lazy again)

    TJ

    #842121

    ha! thanks friend! will try this!

    chris

    #842132

    man! you ROCK! thanks so much!!

    this works perfectly! :)

    this search page has been bugging the heck out of me. finally conquered. thanks again!

    along the same lines of hiding menu items (which is working AWESOME, by the way) …

    ** when the mobile/burger menu comes up on mobile devices, ALL the menu items are showing! ouch! i assume the mobile/burger menu does NOT get affected by the global hide we did. **

    any ideas?

    thanks tj!

    chris

    #842142

    Hmm i know in the latest version of Enfold the mobile menu was completely rewritten and I think some of the class behaviors changed.

    On the surface i see no reason why the global rule shouldn’t work unless the theme is changing or using a different menu id on mobile.

    I’ll have a gander and come back to you…

    TJ

    ** edit **

    The burger menu has the following structure…

    div class="av-burger-overlay" style="display: block; opacity: 1;">
    <div class="av-burger-overlay-scroll">
    <div class="av-burger-overlay-inner">
    <ul id="av-burger-menu-ul" class="" style="padding: 90px 0px;">
    <li class="av-active-burger-items">  /* first child */
    <li class="av-active-burger-items">  /* 2nd child */
    <li class="av-active-burger-items">  /* 3rd child */
    <li class="av-active-burger-items">  /* 4th child */
    <li class="av-active-burger-items">  /* 5th child */
    <li class="av-active-burger-items">  /* 6th child */
    <li class="av-active-burger-items">  /* 7th child */
    <li class="av-active-burger-items">  /* 8th child */
    <li class="av-active-burger-items">  /* 9thchild */
    <li class="av-active-burger-items">  /* 10thchild */
    <li class="av-active-burger-items">  /* last child */
    </ul>
    </div>
    </div>
    <div class="av-burger-overlay-bg"/>
    </div>

    There are no ids or numbers to single out any specific item so we have to use a pseudo class.

    To hide the first menu item on mobile you’d use…

    #av-burger-menu-ul li:first-child {
        display: none!important;
    }

    To hide the last menu item on mobile you’d use…

    #av-burger-menu-ul li:last-child {
        display: none!important;
    }

    to hide any in between you’d use…

    #av-burger-menu-ul li:nth-child(2) {
        display: none!important;
    }

    replacing the two for whatever number you want to hide.

    Adding any new menu items may mess up the order so you would have to finalize the menu 100% then look at the mobile version.

    Hopefully that is clear as mud :)

    TJ

    #842143

    thanks tj! appreciate you!

    btw, what city are you in? i travel a lot for business … would love to get you a beer the next time i’m in town!

    chris

    – – –

    ha! we weren’t finished and they closed us out!

    manchester … very cool! i was in london about a month ago! (i reside in san antonio, texas, usa). we ALMOST went up to manchester! decided it was a little too far away for our trip. will let you know if we’re out there again in the future!

    #842155

    Unless you fly to the UK…

    I’m in Manchester

    TJ

    #842158

    Hi,

    I’m glad you were able to get this corrected. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

Viewing 20 posts - 1 through 20 (of 20 total)
  • The topic ‘how can i find my "page-id" for my SEARCH page?’ is closed to new replies.