Navigating through Expression Engine and utilizing conditional statements

Would greatly appreciate some assistance with this issue. I am working on an Expression Engine website and encountering difficulties with simple conditionals for navigation active states. Despite having a color state designated within the styles, there seems to be a problem with the actual "if statements" themselves as they are not rendering correctly in the code when inspected (the navigation is embedded).

<nav class="group" role="navigation">
    <ul id="nav" class="group">
        <li class="first"><a {if segment_1 == ""} class="active" {/if}  href="{site_url}"><strong>Now</strong></a></li>
        <li><a {if segment_1 == "articles"} class="active" {/if} href="/articles/"><strong>articles</strong></a></li>
        <li><a {if segment_2 == "readings"} class="active" {/if} href="/book-readings/readings"><strong>books</strong></a></li>
        <li class="last"><a {if segment_2 == "readings"} class="active" {/if} href="/shelf/readings"><strong>shelf</strong></a></li>
    </ul>
</nav>
cssnavigationexpressionengineconditional-statements

Answer №1

Give this a try:

<nav class="group" role="navigation">
    <ul id="nav" class="group">
        <li class="first"><a {if "{segment_1}" == ""} class="active" {/if}  href="{site_url}"><strong>Now</strong></a></li>
        <li><a {if "{segment_1}" == "articles"} class="active" {/if} href="/articles/"><strong>articles</strong></a></li>
        <li><a {if "{segment_2}" == "readings"} class="active" {/if} href="/book-readings/readings"><strong>books</strong></a></li>
        <li class="last"><a {if "{segment_2}" == "readings"} class="active" {/if} href="/shelf/readings"><strong>shelf</strong></a></li>
    </ul>
</nav>

To clarify, you mentioned:

they render in the code

My understanding was that you were referring to all of them, hence I suggested wrapping the variables in quotes and curly brackets. However, there may be an issue with the last 2 conditions always being matched together. If this is indeed the problem, then you should compare both segments like this:

        <li><a {if "{segment_1}" == "book-readings" && "{segment_2}" == "readings"} class="active" {/if} href="/book-readings/readings"><strong>books</strong></a></li>
        <li class="last"><a {if "{segment_1}" == "shelf" && "{segment_2}" == "readings"} class="active" {/if} href="/shelf/readings"><strong>shelf</strong></a></li>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When selecting filter options, the posts/images now overlap before transitioning into a masonry view upon resizing the window

I have implemented a filter on my posts to arrange them based on popularity, style, and country. Screenshots: Screenshot 1: Everything looks good when the page loads, displaying all posts/images properly in masonry layout. Screenshot 2: Issue occurs whe ...

phpcssajaxfiltermasonry

Problem with Labels Overlapping and Blocking Text Fields

My issue is that when I interact with the text field, the label "Type your New Task here" moves up and gets covered by what looks like a white overlay. How can I fix this so that the label stays visible at all times? Prior to engagement: https://i.stack.i ...

cssreactjsmaterial-uilabeloverlay

Instructions for adding transitions to an entire page in material-ui while maintaining a fixed AppBar

Is there a way to ensure that the material-ui AppBar remains fixed at the top while being wrapped with page contents in a transition? I want the AppBar to transition (e.g. Zoom or Slide) along with the rest of the page contents. I encountered this issue w ...

javascriptcssreactjsmaterial-ui

The form-group nested within a form-horizontal is exceeding the boundaries of the preceding form-group

I am currently utilizing Bootstrap 3.3.6 and have a basic form enclosed in a panel: https://i.stack.imgur.com/UOFI6.png Although it is quite simple, the alignment of the "Post" button is not displaying properly. Here is the HTML code for the form: < ...

htmlcsstwitter-bootstrap

Photos inside a flexbox do not resize correctly

When placing 2 images inside a flexbox with the column direction, I anticipated that the images would resize accordingly when adjusting browser window size. However, this is not the case. Regardless of the CSS styles applied, I am unable to maintain the o ...

htmlcss

Steps to extract a hash from a document's URL

The following code is used: jQuery(document).ready(function() { console.log($(this)); }); After running this code, the object displayed in the console is: [Document mypage.html#weather] How can I retrieve the last ID from this object? In this ...

javascriptjqueryhtmlcss

Variations in browser rendering of SVGs as CSS list-style-images

After creating a simple SVG of a red circle to serve as the list-style-image for my website, I discovered the concept in this Stack Overflow response: The solution worked seamlessly across all browsers except Internet Explorer. In IE, the SVG image render ...

htmlcssinternet-explorersvgcross-browser

What steps should I follow to align these unordered lists side by side?

Is there a way to align these lists (unordered lists inside list items 1 through 4) side by side using CSS3? I've tried different methods, but I can't seem to figure it out. Here is the code I've been using: <footer> <ul> ...

htmlcsshtml-listsinline

Steps for showcasing stars (1-5) based on the data stored in the database

I recently completed a project where I created a user achievement page that displays their progress. Within the page, there is a table containing the user's level. The table structure looks like this: Users( id, username, password, sum_score, level) ...

phphtmlcss

JavaScript code using the Jquery library to retrieve the following article from 'cached memory'

I am aware of the easier CSS options for my question, but I am determined to learn JS (Jquery), so please bear with me. My plan: Menu-items are connected to articles within my content division. Initially, only the first article (#intro) is displayed. All ...

javascriptjquerycsshtml

Unable to utilize the full column space provided by bootstrap

I need assistance in making three buttons span the entire width of a column. The grid consists of 3 sections for the buttons and 9 sections for other components. Here's a visual reference. Essentially, the buttons should take up the space highlighte ...

htmlcssreactjsbootstrap-4material-ui

The lower division remains static when the browser window is resized

Why does the div with class .lower not move to the bottom of the page when the screen is resized? Could this be because of its CSS property position:absolute;? Check out the code snippet here. #lower { width: 100%; position: absolute; bot ...

htmlcss

Placing a materialUI circular progress bar on top of the circular icon

I'm striving to add a circular progress bar that surrounds a circular icon with a visible space between the two elements, just as depicted in the image below. Although I successfully positioned the circular progress bar around the icon, creating adequ ...

cssreactjsmaterial-ui

What is causing the width discrepancy in my header section on mobile devices?

Help needed with website responsiveness issue! The site works fine on most screen sizes, but when it reaches around 414px in width, the intro section becomes too wide for the screen. Any ideas on what could be causing this problem? html: <nav id="m ...

javascripthtmlcssresponsive-design

What methods can I implement to ensure a button illuminates only when correct information is provided?

I have developed a calculator for permutations and combinations. When either permutation or combination is selected, and the required values are entered, I want the calculate button to light up. How can I achieve this without using setInterval in my curren ...

javascripthtmlcssbuttoncalculator

Is it possible for a complete CSS ".class" to possess the specificity of '!important'? [closed]

It's quite challenging to determine the exact inquiry being made here. This question lacks clarity, precision, completeness, specificity, and is overly general or rhetorical, making it impossible to answer in its current state. To obtain assistance in ...

jquerycssclasscss-specificity

Allowing Users to Easily Copy CSS ::before Content

Text inserted via pseudo-elements like ::before and ::after cannot be selected or copied. Is there a way to change this behavior? span::before { content: "including this text"; } <p> When the text of this paragraph is selected and copied, ...

javascripthtmlcss

Attach the div element firmly to the bottom of the webpage

I'm trying to place a second div under one with position absolute, but the two divs have different widths. The top div is centered and positioned absolutely, while the bottom div should span 100% of the width. Any suggestions on how to achieve this? ...

csshtml

When you hover over a Wordpress page, the entire text on the page will be underlined

Currently designing my own website using WordPress with the Elementor free plugin and Phlox theme. I've made some progress by completing a few sections which include text, buttons, and images. However, I'm encountering an issue where all the text ...

csswordpress-theming

Leveraging node.js and express for incorporating custom stylesheets and scripts

I recently designed a webpage with the following elements at the beginning: <link href="./css/font-awesome.min.css" rel="stylesheet"> <link href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600" rel="stylesheet ...

htmlcssnode.jsexpress