SlickNav Menu Bar logo/Site title

92 views Asked by At

Looking at upgrading my website and currently have my website name (not a logo) as part of my menu - just an easy solution, works well. For mobile screens, the template I have purchased has a slicknav menu. What I wanted is to have the website title in the middle of the slicknav menu bar. I am aware there is a 'brand' function for slicknav, and I do think this is being used for displaying the search icon and other social icons.

I am not a website expert :p

So can anyone give me some advice on how to add the title (with correct font etc) to the slicknav bar on mobile, or how to add a 'text box' centred over the menu, and where I need to include the code etc.

I have managed to include the changes in the main menu in the "Additional CSS" part of Wordpress customiser, but if you can point me in the right direction happy to put it anywhere.

Website is interiors.stephhannam.com

Thanks in advance, Steph

2

There are 2 answers

1
Vick On

You can use the :before then use content: "place anything here" to put stuff. :After also works but it will drop after everything else in the drop menu. It works for images and links too. Then just adjust it using position:, padding:, text-align:, and font-size: etc.

.slicknav_menu:before {
    content: "STEPH HANNAM INTERIORS";
    font-size: 3vw;
    position: absolute;
    padding: 4vw;
    text-align: center;
    width: 100vw;
}
0
The Alp of proggraming On

it's different if you are using CSS I guess but I think that in HTML we start the stuff with it's like

<html>
  <body>
  <h1>youre website name<h1>
  <style>
  measurements:- ...
  </style>