Navbar Links

Support
#1

Hi, I’m having trouble getting the ‘navbar links’ behave as I would like them to. I want them to be dark green, having a underline only on the active page, turning orange on hover, could also turn orange on active page/sektion… but when I look at it; it shows different in cornerstone (better result) and in preview (worse) f e k the underline is under every link all the time. Do I have a conflict or what am I doing wrong?

See preview mode and cornerstone mode how different they are, and in cornerstone view they are more like I would like them to be:

#2

Hi There,

If you are using a One Page Navigation Menu, use just #id instead of www.example.com/#id

To align your navbar with your logo, you can go to Theme Options Header and adjust top link spacing.

Hope it helps, if you need further help provide your URL.

Thanks!

1 Like
#3

Thanks so much! Now my links looks good!! :grinning: Could you give me an advise on a couple of more things I’m struggling with?

  1. The top bar, I would like to have content there, only e-mail and adress. And I do not want to use the ‘+’ icon and the widgets. So to get this looking nice I need som CSS code. When I’m trying to do a ‘p’ or a ‘div’ inside the content area to the top bar, it makes the top bar so high in size…? and I still can’t work out how to make nice space, like ‘tab’ or ‘column’ inside this top bar so the e-mail adress and the street adress don’t stand too close together…? look at
    http://ostlingpartner.se/hem/
  2. Can’t seem to control where the one-page links ‘landing’ with the alternative of 'padding ’ or ‘margin’ of the ROWs or COLUMNS… would like to have the same ‘space before the headline’ when you are using the links… sounds like it would be dead easy but… not… please advise if you can. (password to view that page is trolla)

Thank you!

#4

Hi,

  1. You can try adding it in a span tag.
<a style="margin-right:10px;" href="info@ostlingpartner.se">info@ostlingpartner.se </a>
<span style="display:inline-block;">Street Address</span>
  1. You need to add the id in your sections instead of adding it in your custom headline.

Hope that helps

1 Like
#5

Thank You Paul!! That helped so much!! I’m grateful! Is that a chans to hide the whole topbar on mobile?

//Camilla

#6

Hi there,

You will need to add custom CSS for it as that option does not come out of the box for the theme.

It should be something like:

@media (max-width: 480px) {
    .x-topbar {
        display: none;
    }
}
1 Like
#7

Thanks that worked perfect!

#8

Hi again, I did change and put just #id instead, but that works of course perfect on the main ‘one page’. Because I have six small pages that are not part of the main/one page navigation. Maybe sounds weird but the customer wants it that way. So from these ‘under pages’ the ‘back’ links in the header does not work (of course). What would you do if you were me?
Also, on the mobile, the ‘back’ links from these ‘under pages’ does not work exactly like you would want it to do. They do take you back but not to the #id on the page. Is that not possible on the mobile view?

The page is more or less ready here:
http://ostlingpartner.se/hem/

Thanks so much for your help!

#9

Hi There,

Do not set your One Page Menu as the Primary Menu because your One Page Menu is designed to work and assigned to an specific page, right?

Create a new menu instead and set this menu as the Primary Menu, now this will be your menu for all pages and posts, except the page that is using the One Page Menu. Now you can use an absolute link on this Primary Menu so you can linked it back to the main page.

Hope this shed some lights,
Cheers!

1 Like