Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

How do you add vertical lines ( | ) between the items of your navigation bar/header?


tenboss

Question

Site URL: https://www.bubbleteaboss.com

Hi,

Can someone help me. I've tried existing codes in the forums but they do not work.

How do you add vertical lines (dividers) between the items of your navigation bar/header? So far, I only manage to add a | by adding one to the navigation title (in the Pages section) but this is not working right because the | also changes color once you put your cursor on it (e.g. "Home |" becomes a secondary color instead of just "Home"). 

Does anyone have a CSS code?

Thank you 🙂

Link to post
  • Answers 6
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

6 answers to this question

Recommended Posts

  • 0

Try the following as a starting point. Put in Design > Custom CSS.

.header-nav-item a:after {

  content: " | ";
  
  }

.header-nav-item:last-child a:after {
  
  content: '';

  }

The previous is for a 7.1 site.

Let us know how it goes.

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post
  • 0

Hi,

Thanks for responding. The code works fine. 

Only thing not sure if it can be fixed is the line under the page selected does not just stay/float under the word it is under the tab like in the picture. Is this something that can be fixed?

Many Thanks

 

btb navigation menu pic.jpg

Link to post
  • 0

I think we should try another method. When I came up with the CSS I was working with your home page so I didn't take into account the underline. It looks like getting things to line up with just some CSS is tricky.

Replace the CSS code I gave with the following.

.header-nav-item--divider {

  padding: 0.1em 0;
  
  }

Put the following in Settings > Advanced > Code Injection > HEADER.

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Put the following in Settings > Advanced > Code Injection > FOOTER.

<script>

  $( ( ) => {
  
    $( '.header-display-desktop .header-nav-item' )
    
      .slice ( 0, -1 )
      
      .after (
      
        '<div class="header-nav-item header-nav-item--divider">' +
        
          '|' +
          
          '</div>'
          
        );
        
    } );
    
  </script>

What this is doing is using Javascript, jQuery and some CSS to add the dividers in a way that shouldn't interfere with the underline.

Let us know how it goes.

Edited by creedon

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post
  • 0

Hi 

I just discovered another error I am unable to fix.

On my FAQ page the table I created with the code below is correct on the Desktop and android phone, however on a Apple device the font changes. Do you know how I can ensure the font stays the same on both systems?

Many Thanks 

 

code used directly into FAQ page using content block option:

<style type="text/css">
.tg  {border-collapse:collapse;border-spacing:0;}
.tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
  overflow:hidden;padding:10px 5px;word-break:normal;}
.tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
  font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}
.tg .tg-6rvr{border-color:#cca1f7;font-family:"Comic Sans MS", cursive, sans-serif !important;;text-align:left;vertical-align:top}
.tg .tg-ituh{background-color:#cca1f7;border-color:#333333;font-family:"Comic Sans MS", cursive, sans-serif !important;;
  font-weight:bold;text-align:left;vertical-align:top}
.tg .tg-lyg7{background-color:#cca1f7;border-color:#333333;font-family:"Comic Sans MS", cursive, sans-serif !important;;
  font-weight:bold;text-align:center;vertical-align:top}
.tg .tg-0j8n{border-color:#cca1f7;font-family:"Comic Sans MS", cursive, sans-serif !important;;text-align:center;vertical-align:top}
</style>
<table class="tg">
<thead>
  <tr>
    <th class="tg-ituh">Region</th>
    <th class="tg-lyg7">Price</th>
    <th class="tg-lyg7">Courier </th>
    <th class="tg-lyg7">Free Shipping</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td class="tg-6rvr">UK&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td class="tg-0j8n">£2.50</td>
    <td class="tg-0j8n">Royal Mail 1st Class Signed for (no tracking)</td>
    <td class="tg-0j8n">Order Value £30</td>
  </tr>
  <tr>
    <td class="tg-6rvr">Europe &amp; Ireland&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td class="tg-0j8n">£8.50</td>
    <td class="tg-0j8n">Royal Mail 1st Class Track &amp; Sign</td>
    <td class="tg-0j8n"> Order Value £30</td>
  </tr>
  <tr>
    <td class="tg-6rvr">Worldwide</td>
    <td class="tg-0j8n"> £10.00</td>
    <td class="tg-0j8n">Royal Mail International Track &amp; Sign </td>
    <td class="tg-0j8n"> Order Value £30</td>
  </tr>
</tbody>
</table>

 

 

image.png

Link to post
  • 0
8 hours ago, tenboss said:

however on a Apple device the font changes

I'm unable to detect the issue you are seeing. I tried on my iPhone 5 with iOS v10.x. Please tell us more about your Apple device? What is it? iPhone? iPad? What model? What iOS version? What browser are you using? Which version?

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...