Skip to:
Content
Pages
Categories
Search
Top
Bottom

[Resolved] A way of setting the css of a nav item based on whether the current page is BP page?


  • nickharambee
    Participant

    @nickharambee

    12 years, 4 months ago

    Rather than having separate tabs for activity,members,groups and forums in my navigation bar, I have just one tab called ‘members’ which has a dropdown sub menu that handles the various Buddypress pages. What I would like to be able to do is to set the css of this single navigation tab depending on whether the current page is a Buddypress page, i.e highlighting it so that the user knows that they are in the members (Buddypress) area of the site. I am wondering then if there is a function for doing this, along the lines of:

    if current page = Buddypress page, CSS of navigation item is….

    Thanks,

    Nick

Viewing 4 replies - 1 through 4 (of 4 total)

  • Roger Coathup
    Participant

    @rogercoathup

    12 years, 4 months ago

    Have a look at some of the classes applied to body — there’s no single class being used for BuddyPress pages, but the set is quite small, and you should be able to base your selectors on them to capture whether you are on a BP page or not:

    .directory …. , .my-account … , etc.

    And, if you are using a pre-processor such as LESS or SASS, it makes it much easier to write nested CSS like this


    nickharambee
    Participant

    @nickharambee

    12 years, 4 months ago

    Thanks Roger. Without getting in LESS or SASS, which I don’t have the time to learn right now, how would I construct the function for this? I am presuming I would be using PHP and including a function in my theme’s functions.php file, which would be in the form.

    If body tag has the id “bp-default” then set drop-down menu item background color to…


    Roger Coathup
    Participant

    @rogercoathup

    12 years, 4 months ago

    No, no PHP required.

    Just do it with CSS and nested selectors.

    Something like:

    .directory li.nav-item, .my-account li.nav-item {
    background-color: blue;
    }


    nickharambee
    Participant

    @nickharambee

    12 years, 4 months ago

    doh! of course. .directory, .groups and .my-account classes, plus the class of the div I want to apply css to seems to cover all eventualities. Thanks Roger.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘[Resolved] A way of setting the css of a nav item based on whether the current page is BP page?’ is closed to new replies.

Topic Info

Skip to toolbar