I have a custom question about the tabbed section element in the Salient theme.
I use the 'sticky scrolling style' settings of the element and I would really like to make changes to the appearance of specific items in the navigation part. How I setup my navigation part now (and would ideally like to keep it):
- Chapter 1
- Chapter 1.1 - title chapter 1.1
- Chapter 1.2 - title chapter 1.2
- Chapter 2
- etc etc
I would really like to make it more clear what the start of a new chapter would be so that I can get rid of the 'Chapter 1.1 -' part in the navigation which would clean it up a lot.
For this, my question is if it is possible to make certain tabs bold/different colour/different font-size. I have added custom CSS classes (.Tab_Bold) to the Chapter (so chapter 1, chapter 2, and not to chapter 1.1 etc) tags.
It seems to me as if the custom CSS class is only taken for the mobile display as I can find it in that section of HTML code when I use the 'inspect' function in the browser. This is not the case for the section of HTML code generating the display non-mobile mode. As I can add this CSS and only on the mobile version the specific tags will be in bold:
.Tab_Bold .inner {font-weight: bold;}
I understand this would be a matter of custom coding in addition to a quite individual question but I would love if you could help me with this!
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
For others wanting to do this, to sum-up the question (a private message was send in between the replies of Tahir - giving access to the content of the website)
The solution: I have added icons (standard function of 'tabbed section' element) to the tabs I want to be highlighted. Then with the code Tahir suggests the font style can be edited based on the icon CSS class which is then attached to the specific tabs. It comes out as follows (font-weight: bold; --- was added to the code provided).
Thanks for the very good and fast support! Great fan of the theme and its many options.
Dear,
I have a custom question about the tabbed section element in the Salient theme.
I use the 'sticky scrolling style' settings of the element and I would really like to make changes to the appearance of specific items in the navigation part. How I setup my navigation part now (and would ideally like to keep it):
- Chapter 1
- Chapter 1.1 - title chapter 1.1
- Chapter 1.2 - title chapter 1.2
- Chapter 2
- etc etc
I would really like to make it more clear what the start of a new chapter would be so that I can get rid of the 'Chapter 1.1 -' part in the navigation which would clean it up a lot.
For this, my question is if it is possible to make certain tabs bold/different colour/different font-size. I have added custom CSS classes (.Tab_Bold) to the Chapter (so chapter 1, chapter 2, and not to chapter 1.1 etc) tags.
It seems to me as if the custom CSS class is only taken for the mobile display as I can find it in that section of HTML code when I use the 'inspect' function in the browser. This is not the case for the section of HTML code generating the display non-mobile mode. As I can add this CSS and only on the mobile version the specific tags will be in bold:
.Tab_Bold .inner {font-weight: bold;}
I understand this would be a matter of custom coding in addition to a quite individual question but I would love if you could help me with this!
Hey MartijnSmits ,
Please provide the page url where you have set this up so we can respond with CSS .
Thanks.
ThemeNectar Support Team
Hey Again,
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
.nectar-scrolling-tabs .scrolling-tab-nav .menu-item.has-icon { font-size: 18px; line-height: 31px; }Thanks
ThemeNectar Support Team
Thanks a lot! That works very well!
For others wanting to do this, to sum-up the question (a private message was send in between the replies of Tahir - giving access to the content of the website)
The solution: I have added icons (standard function of 'tabbed section' element) to the tabs I want to be highlighted. Then with the code Tahir suggests the font style can be edited based on the icon CSS class which is then attached to the specific tabs. It comes out as follows (font-weight: bold; --- was added to the code provided).
Thanks for the very good and fast support! Great fan of the theme and its many options.
This ticket can be closed