Baskerville 2: nav menu styling

  • Author
    Posts
  • #3254345

    nilla2014
    Member

    I’d like style the following in the nav menu:

    1. replace the forward slash with a pipe, between menu items only
    2. remove forward slash between social icons
    3. position social icons (right) but the last icon (RSS) to be inline with right-side of Sidebar

    Many thanks

    The blog I need help with is imageearthtravel.com.

    #3254356

    elizazh
    Member

    Hi @nilla2014,

    1.
    .main-navigation li:before {
    content: “\007C !important”;
    }
    2.
    .main-navigation li.socialmenu:before {
    content: “”;
    }
    3. This might be a bit tricky as the social icons are part of the whole menu. So I can offer you a solution with a right float, but then the icons will be ordered from the first one being most to the right to the last one being most to the left. I guess you can change their order in the menu?
    li.socialmenu {
    float: right;
    }

    Please let me know if this helps.

    Cheers,
    Eliza

    #3254517

    nilla2014
    Member

    Hi @elizazh

    Many thanks for your help!

    No 1 & 2 did not change/remove forward slashes.
    No 3 works and I can deal with re-ordering the icons.

    Since this ticket, I also created a separate social menu as thought this may be easier to style inline with the nav menu if kept seperate. Also, the links and hover color work on the social menu, but don’t on my nav menu social icons – weird as I’ve used identical ULRs, etc.

    #3255159

    nilla2014
    Member

    Hi Eliza,

    The above CSS had a couple of errors. This is the correct code should others require the same:

    /*replace forward slash with pipe*/
    .main-navigation li::before {
    content: “\007C”;
    color: #eeeeee;
    }

    /*remove forward slash between social icons*/
    li.socialmenu:before {
    content: “”;

    So 1 & 2 are now finished.

    For 3, I’ve moved the new social menu to below my header’s title. Can I move this to be inline of my nav menu? If so, I will replace the current social icons in the nav menu menu options for the new social menu.

    Many thanks for your help.

    #3255560

    elizazh
    Member

    Hi @nilla2014,

    My apologies, for 1. I have misplaced the quotes symbol so it wasn’t working. Glad you figured it out.

    Making the social icons in line with the nav menu:

    .header-inner {
        left: 50%;
        margin-left: -700px;
        text-align: left !important;
    }

    Let me know if that helps.

    Cheers,
    Eliza

    #3256098

    nilla2014
    Member

    Hi @elizazh

    Thank you for this CSS but it didn’t work.

    I’ve decided to leave the social menu where it is as I’ve also got this displaying just about right across tablet/mobile devices.

    Many thanks :)

    #3258265

    elizazh
    Member

    Hi @nilla2014,

    If you still want to do that, please put the code again and let me know so I can check why it’s not working. From my end this code works. Please look at this screenshot.

    Have a nice day!

    #3258385

    nilla2014
    Member

    Hi @elizazh, yes your screenshot is what displayed for me also, but this is not what I hoped for. I wanted the social menu on the same line (but right-side now) as the nav menu. Although I’ve decided to leave the social menu where it displays now, but will play around with the nav menu’s position instead.

    I have a little new issue with the nav menu’s colour behaviour not working:

    .main-navigation li>a:link {
    color: #f9f9f9; /*this is working*/
    }
    .main-navigation li>a:hover {
    color: #aeaeae; /*this is working*/
    }
    .main-navigation li>a:active {
    color: #aeaeae; /*this is not working*/
    }

    I’m trying to get the a:active to display the darker grey colour when someone is on that item’s page.

    Would you like me to start a new ticket for this?

    Many thanks for you help!

    #3259943

    elizazh
    Member

    Hi @nilla2014,

    If you want the social icons on the same line as the menu, you can try that:

    .header-inner {
        bottom: -70px;
        z-index: 1;
    }

    For the active link, please try this:

    li.current-menu-item a {
        color: #aeaeae;
    }

    Have a wonderful day!

    #3260108

    nilla2014
    Member

    Hi @elizazh, although this social menu code positioned the menu inline, it made my nav menu un-clickable, so had to remove your CSS. Also, it does not address mobile/tablet displays.

    The active menu CSS didn’t work.

    Many thanks

    #3260155

    elizazh
    Member

    Could you put the CSS for the active menu to see why it’s not working for you? You can try put !important in case it’s being overwritten by another rule.

    li.current-menu-item a {
        color: #aeaeae !important;
    }

    I see that now you moved your nav to be left aligned. You can now place the social icons to the right and do:

    .header-inner {
        bottom: -70px;
        z-index: 1;
        right: 0;
    }

    Please keep the code for like 30mins so I can see it if it’s not working and help you further. To me with this code it looks like that:
    https://imgur.com/a/kIWZOZe

    #3260184

    nilla2014
    Member

    Hi again,
    1. I try not to use !important and would rather try and find what the conflicting CSS is.

    2. a.I aligned my nav back to the left as when it was right-aligned, the display in a mobile/tablet didn’t work I’m trying to reduce the amount of CSS.
    b. I tried the social icons on the right but as I mentioned above, this code made the nav menu options un-clickable.

    3.What size screen are you using?
    In your link, my header image is truncated (top and bottom) and there’s too much wasted space (left and right) around a page. I thought Baskerville 2 is responsive?

    many thanks for your help.

    #3260196

    elizazh
    Member

    Unfortunately sometimes we can’t avoid the use of !important. If you have access to the CSS files of your theme, then the best option would be to edit them and therefore there won’t be a need to use !important. However, this is not always possible in WordPress.com, as we don’t have access to the theme’s CSS files here so we could only overwrite existing ones and sometimes that could only be done with !important. In this case though, I didn’t use !important and it worked for me. If you put it back I can check why it is not being applied.

    In this case I wouldn’t worry much about the amount of CSS. There are website with thousands of lines of CSS code that work just fine.

    If, at some point, you wish to try the social icons on the right, please let me know when you do, so I can actually check live what is happening. It might be something as simple as adjusting the width of the social icons container.

    Your website is indeed responsive but the content container has a maximum width. My monitor is 27”. The picture looks like that because it’s 100% width and fixed height, so it stretches to fill the screen size.

    #3260227

    nilla2014
    Member

    Thank you for your time.

    I’ve added all the code back in and made a couple of adjustments.

    Result:
    1. The social icons display nicely on a desktop & tablet, but not on a mobile device (social icons overlap menu hamburger icon and label)
    2. Menu items on desktop/tablet/mobile device are no longer clickable.

    #3260283

    nilla2014
    Member

    Sorry, I couldn’t leave my nav menu non-clickable for any longer, so removed the cod.

    Thanks anyway

    #3260654

    elizazh
    Member

    Sorry, it was quite late here already :) For mobile devices you would need an alternative, they simply won’t fit all together on a mobile device. For the unclickable menu items you could check if the problem is the social menu container width and adjust it accordingly. If it overlaps the menu items, they won’t be clickable.

    #3266290

    nilla2014
    Member

    Hi @elizazh

    I’ll try again to position the social menu container aligned with the nav menu but on the right-size as at the moment, the top of my website doesn’t look balanced.

    I notice that on a mobile/tablet device that the social container size stays the same and is not responsive (and as mentioned above, not clickable). Is this a Baskerville 2 shortfall/bug?

    My previous Visual theme was responsive across all devices without any issues or extra CSS.

    #3266509

    elizazh
    Member

    Hi @nilla2014,

    It will be clickable if you add this rule:

    .header-inner {
        z-index: 1;
    }

    I don’t think that the responsiveness (or the lack of it) of the social nav is a theme’s bug, because right now this is your CSS code and not theirs. I don’t know how it looked before you’ve added any CSS. When you add your CSS code you will need to consider mobiles and tablets as well, and sometimes, write extra code about them as well. Maybe for mobiles you can make the social icons smaller so they fit on the screen?

    #3267104

    nilla2014
    Member

    Hi @elizazh

    I really appreciate all your help :)

    I included this CSS:

    /*social menu position*/
    .header-inner {
    text-align: -webkit-right;
    position: absolute;
    bottom: -70px;
    z-index: 1;
    right: 0;
    }

    1. I couldn’t get the social menu to display nicely as in your above screenshot i.e. the RSS feed icon in line with the right-side of the sidebar (if that makes sense). So, I added:

    text-align: -webkit-right;

    The menu then displayed on the right, but now it’s hard on the right although everything is clickable.

    I tried this also but it didn’t work:
    float: right;

    2. Although the social icons are clickable across all devices, the nav menu labels are no longer clickable – bizarre!

    Many thanks

    #3267108

    nilla2014
    Member

    Forgot to mention, the default social icons are quite large across all devices.
    Is there a Baskerville 2 setting to make these smaller or is more CSS required?

    Thank you

The topic ‘Baskerville 2: nav menu styling’ is closed to new replies.