[Resolved] Adding left hand text to right hand second navigation

[Debbie]

Hallo

Not sure how to achieve this. I have a secondary navigation at the very top of the website and all the menu items are justified to the right of the screen, which is where I want them. On the same line, but at the other end of the screen (justified to the left), I’d like to add some text.

I’ve added the text using a hook (generate_inside_secondary_navigation), but this appears in the middle of the screen.

So I’ve added a div class to this text like so –

Talk to us about your project – 00000 000 000

.

And added this CSS to the customise, additional CSS like so –
.talk {text-align: right;
size: 13px;}

But this doesn’t work. Am I missing something?!

It’s going to be difficult to add screenshots as this is something I’m working on locally, so nothing live yet.

Sorry if this is a simple question, but I’m a bit of a newbie to this and I’m making it up as I go along! 🙂

Thanks

[Debbie]

Sorry, the div class didn’t come out properly in the original query above. Here it is –
<div class="talk">Talk to us about your project - 0000 000 000</div>

Not sure what I’m doing wrong here, but don’t seem to be able to add the html – it seems to be stripped out whenever I try?

[David]

Hi there,

is it possible to see the site ?

NOTE: in the forum, to display code, you must highlight the code, and click the code button before subimitting. I edited the above reply so you can see it now 🙂

[Debbie]

Hallo David – sorry for not getting back sooner – been manic at work since I got back this year! I’ve included a link to a folder where I’ve stored the images. Capture.png is what the header looks like at the moment – the highlighted text needs to be at the left hand side of the header and a smaller size to match the secondary menu on the right hand side (which looks fine and is exactly where I want it to be). I’ve also included a screenshot of the hook code and the additional css that I’ve added.
Is that clearer? Let me know if you need anything else.
Thanks – Debbie

[David]

OK – so Text alignment applies to the content within the container. Not the actual container eg. div.text
In order to align the div.text i need to know what its sits inside of.

Could your right click > inspect the div.text and share a screenshot of the developers tools > elements tab so i can see div.text and its surrounding HTML?

[Debbie]

Ah – I’ve added the text as a hook element ‘generate_inside_secondary_navigation’, so as I understand it, the text is being added to within the menu itself, hence the positioning? I should be adding to the menu bar instead? I’ve added a link, so that you see what’s coming up in the elements tab.
I have a feeling I’ve done this completely incorrectly!! 🙂 – could you point me in the correct direction?! Thanks David – much appreciated.

[David]

Try this CSS:

.secondary-navigation .talk {
    order: -1;
    margin-right: auto;
}

[Debbie]

Brilliant!! That worked a treat – thanks David

[David]

Glad to hear that!

[Author]

Posts