Nav bar layout and posts page changes

Homepage Forums Pro Support Forum Blackoot Pro Blackoot Pro Support Nav bar layout and posts page changes

Nav bar layout and posts page changes

This topic contains 12 replies, has 2 voices, and was last updated by  inseromarketing 3 months, 2 weeks ago.

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #21334
    Nav bar layout and posts page changes

    inseromarketing
    Participant

    Hi Mathieu,

    I’ve taken a bunch of feedback on my site from customers and one of the biggest complaints coming back at the moment is that the layout of some of the site makes it less user-friendly. As such, I am trying to improve the usability of it to mean retention rate goes upwards and people find it easier to interact with.

    The two key areas are the news and navbar. Firstly, as it’s likely the easiest fix, I will start with the navbar:

    I’ve been through all the nav bar settings and I just can’t get the desired look that I am trying to achieve so rather than giving you a long description, I’ve attached a screenshot of the desired result. I am assuming it’s going to need some of your magic! As you’ll see, the social icons have moved to the right and sit on the nav bar itself and our logo placement will be small and to the left-hand side of the page.

    The second area is the ‘posts’ page:

    Feedback has shown that, no matter how much I love our home page image, users feel like they come to our site and just have to navigate to a different page as there is nothing there for them to review.

    As such, I’d like to make our home-page our post page. Now, I know that I can do this in the general settings, but by doing so I lose some of the customisation options that your theme generally offers for normal pages, so I am wondering how I can get around this easily?

    Once we’ve achieved that, I’d like to push a banner above all of the content and the sidebar (we did this previously on another build if it helps!) so that everything drops down underneath the main advertisement that I will change periodically through the sliders menu (or however I am meant to do it!).

    I’d also like to change the ‘read more’ button to just be gold (the button is currently black but goes gold when hovered – I’d like the button gold full time, or to invert so it is gold and hovers to black, whatever is easiest to achieve).

    The final change – and this one might be a headache – is that I would like the latest post to remain the sizing it currently is, bigger and spanned across the page, but for any posts underneath to show 2, smaller posts side by side in the page body.

    Many thanks,
    Stuart

    Attachments:
    You must be logged in to view attached files.
    #21337
    Reply to: Nav bar layout and posts page changes

    iceable
    Keymaster
    Support
    Happy with my help?
    Buy me a beer!

    Hi, some of these might be better done with a child theme, but pure I think we can make it work with just custom CSS.

    First of all, you’ll need to remove these two bits from your current Custom CSS:

    @media only screen and (min-width: 767px) {
    	#header-wrap {
    		margin-left: -50%;
    		margin-right: -50%;
    	}
    }

    and:

    #header .container {
    	display: none;
    }

    You’ll also need to make sure you upload a logo with an appropriate size in Theme Options > Logo (the current one is pretty big has a large transparent background; this won’t work well with the layout you want!)

    Then this additional custom css should do the trick (please consider this code as “experimental”!)

    .tophead .socialmedia-wrap {
    	text-align: right;
    	padding: 0;
    }
    
    #header .container {
    	display: block;
    }
    
    #logo {
    	text-align: left;
    	position: absolute;
    	top: -50px;
    }
    
    #logo img {
    	height: 45px;
    	width: auto;
    }
    
    @media only screen and (min-width:768px) {
    
    	#nav-wrap {
    		position: absolute;
    		width: 100%!important;
    		max-width: 460px;
    		margin: 0 auto;
    		left: 0;
    		right: 0;
    		top: 0;
    	}
    
    	#tophead-wrap {
    		position: relative;
    	}
    
    	#header .container {
    		width: 950px;
    		max-width: 96%;
    	}
    
    }
    
    @media only screen and (max-width:767px) {
    	#logo {
    		left: 20px;
    	}
    }

    To be honest, this part was actually the trickiest!

    Now for a golden read more button:

    .navbutton a {
    	background-color: #b99128;
    	color: #fff;
    }

    If you also want it to turn black on hover, just add this:

    .navbutton a:hover {
    	background-color: #000;
    }

    Lastly to show the latest posts side by side, two in a row, except for the first one (this code is to be considered “experimental” as well – and also I made it to only work on desktop, as two columns on mobile probably isn’t a good idea):

    @media only screen and (min-width:768px) {
    
    	.blog #page-container .post {
    		width: 45%;
    		float: left;
    		margin-right: 2%!important;
    	}
    
    	.blog #page-container hr {
    		display: none;
    	}
    
    	.blog  #page-container .post:first-child {
    		width: auto;
    		float: none;
    	}
    
    }
    #21338
    Reply to: Nav bar layout and posts page changes

    inseromarketing
    Participant

    On first inspection these look to have all worked.

    I need to change the logo but there will need to be some more padding added to allow space for a normal logo size I think….how can I add a bit more padding at the top of the page so theres more space for a logo to fit into?

    Also, does this mean if I add a slider it will appear about those posts? I’d like the overall ‘home’ page to be the post page, so when you go to our URL you are met by the posts with a slider above them. I don’t know if I need to change how pages are structured or which page should be the ‘home’ and ‘post’ page to make this possible. Any advice appreciated.

    #21339
    Reply to: Nav bar layout and posts page changes

    inseromarketing
    Participant

    I also just noticed that the ‘read more’ button has changed to gold, but only on the full sized post. The 50% sized one is still black πŸ™‚

    #21340
    Reply to: Nav bar layout and posts page changes

    iceable
    Keymaster
    Support
    Happy with my help?
    Buy me a beer!

    Oh sorry about this, I just realised I missed two paragraphs from your first post!

    As such, I’d like to make our home-page our post page. Now, I know that I can do this in the general settings, but by doing so I lose some of the customisation options that your theme generally offers for normal pages, so I am wondering how I can get around this easily?

    I’m not sure which customisation options you are referring to; but almost all setting you can set in “icefit page settings” for pages has an equivalent setting for the post page in Theme Options > Blog Settings.
    If you don’t find what you need in there please let me know.


    Once we’ve achieved that, I’d like to push a banner above all of the content and the sidebar (we did this previously on another build if it helps!) so that everything drops down underneath the main advertisement that I will change periodically through the sliders menu (or however I am meant to do it!).

    Have you tried the slider already? Sounds like it should do exactly this without the need for further customisation.


    Now, to make room for a larger logo, first remove this from the previous code:

    #logo img {
    	height: 45px;
    	width: auto;
    }

    Any logo image you upload will now display at its real size (even if this means overflowing outside of the top bar).
    Then adjust this code based on the logo height to adjust the rest of the bar:
    (example for a 60px high logo)

    .tophead.center { height: 60px; }
    #logo { top: -60px; }
    .tophead .socialmedia-wrap { padding-top: 25px; } /* = 60-35 */ 
    #nav-wrap { top: 19px;  } /* 60 - 41 */

    The read-more button looks gold on both posts on my end; maybe try to clear the cache?
    You can also try to replace “background-color” in the code with just “background”; it may help to override the default.

    #21342
    Reply to: Nav bar layout and posts page changes

    inseromarketing
    Participant

    In regards to the slider, I have it set as ‘on’ in the blog settings here:

    Activate slider on blog pages – ON

    …but nothing shows on the page? I am confused as to how to get it showing. Probably just me being an idiot!

    I also now have a page title showing on blog pages but I can’t remove it in the options (as I’ve changed the home page to display posts and therefore seem to have lost the option to turn this on/off!!).

    #21344
    Reply to: Nav bar layout and posts page changes

    iceable
    Keymaster
    Support
    Happy with my help?
    Buy me a beer!

    The slider now has a global on/off switch for all slider-related functionalities in Theme Options > Slider settings (it wasn’t there in the older versions of BoldR I think you were used to! πŸ™‚ )

    You can hide the page title for the blog page from Theme Options > Blog Settings > Show Page title on Blog Homepage.
    I guess you found that one before I replied because I can’t see a page title on your site now – or maybe I misunderstood the question?

    #21353
    Reply to: Nav bar layout and posts page changes

    inseromarketing
    Participant

    You can hide the page title for the blog page from Theme Options > Blog Settings > Show Page title on Blog Homepage.
    I guess you found that one before I replied because I can’t see a page title on your site now – or maybe I misunderstood the question?

    I mean on each individual post page. For instance here:

    http://www.chalkedout.com/news/vip-access/

    It’s showing the post title at the top of the page where a page title usually is, which I don’t want!

    #21354
    Reply to: Nav bar layout and posts page changes

    inseromarketing
    Participant

    The slider now has a global on/off switch for all slider-related functionalities in Theme Options > Slider settings (it wasn’t there in the older versions of BoldR I think you were used to! πŸ™‚ )

    I also have this turned on but no slider showing on the home page http://www.chalkedout.com (which is the post page)

    #21355
    Reply to: Nav bar layout and posts page changes

    iceable
    Keymaster
    Support
    Happy with my help?
    Buy me a beer!

    My bad about post title, I did misunderstand! This will hide them from single post view:

    .single #page-title { display: none; }

    Do you have any slide set? I can see the slider is indeed active on this page but it is an empty wrap with no slides.

    #21379
    Reply to: Nav bar layout and posts page changes

    inseromarketing
    Participant

    Sorry for the slow reply – I lost internet in a house move!

    The page title fix is great, thank you.

    I do indeed have a slide set, which is why I am a little confused. Could you help me to get this showing?

    #21382
    Reply to: Nav bar layout and posts page changes

    iceable
    Keymaster
    Support
    Happy with my help?
    Buy me a beer!

    No problem, did you forget to pack your internet in a box while moving?

    πŸ˜€

    I just had a look (found that the password you created for me was still working) and found the culprit: the image for the slider is not set – or rather it is set in the “link” field instead of the “featured image” one.

    You need to set the slide image as “featured image” (box at the bottom right) like featured images for posts.
    The “link” field is to make the slide clickable, so when users click the slide they will be taken to this link – you will probably want to remove the link to the image file by the way!
    Maybe I should consider making the hint text under this field to make it more clear, I admit it can be a bit confusing.

    #21385
    Reply to: Nav bar layout and posts page changes

    inseromarketing
    Participant

    Haha! Trust me, I could have used that box over the last few days!!

    I’m really glad that the issue was me being stupid rather than me breaking something. Sorry for taking your time on this one. My bad πŸ™‚

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.


PayPal Verified
Secured by PayPal
Secure Credit Card payments powered by Stripe
SiteLock